首页

51问答网 > 如何用javascript实现点击图片触发下拉列表事件显示内容

如何用javascript实现点击图片触发下拉列表事件显示内容

2025-01-06 05:15:53

推荐回答（5个）

回答1：





demo

.combox{width:200px;height:auto;position:relative;}
.combox_div{width:200px;height:30px;border:1px solid darkgray;}
.combox_div span.combox_text{display:inline-block;width:150px;height:30px;line-height:30px;padding-left:12px;font-size:14px;font-family:微软雅黑;color:#DDD;}
.combox_div span.combox_cursor{display:inline-block;width:30px;height:30px;line-height:30px;background-color:dimgrey;text-align:center;cursor:pointer;color:white;}
.combox_list{position:absolute;top:30px;left:0px;border:1px solid black;width:200px;height:auto;border-top:0px none;display:none;}
.combox_list a{cursor:pointer;display:block; list-style:none;width:190px;padding:5px 0 0 10px;height:30px;line-height:30px;font-size:14px;font-family:微软雅黑;}
.combox_list a:hover{background-color:#3399FF;color:white;}





    
        按时间
        ▽

按时间
按人气

    var _span = document.querySelector('.combox_cursor'),
_sta = false,
_a = document.querySelectorAll('.combox_list a');

    _span.onclick = function(){
if(_sta){
    document.querySelector('.combox_list').style.display = 'none';
}else{
    document.querySelector('.combox_list').style.display = 'block';

_sta= !_sta;
    }

    for(var i=0;i<_a.length;i++){
_a[i].onclick = function(_e){
    var _combox_text = document.querySelector('.combox_text');
    _combox_text.innerHTML = _e.target.innerHTML;
    document.querySelector('.combox_list').style.display = 'none';
    _sta = false;
}
    }

效果如图：

回答2：

这种下拉列表都是通过JS来模仿下拉列表样式

首先你的下拉列表内容实际上市存在的,只不过display:none
当点击按钮的时候设置display:block即可

回答3：

var img = ducument.getElementById("img");
var div = ducument.getElementById("div");
img.onclick = function(){

if(div.style.display=="block")
{
div.style.display='none';
}
else
{
div.style.display='block';
}
}

回答4：

先要获取到这个元素的dom，绑定点击事件，事件方法里面就触发select的点击事件，简单明了

回答5：

解决了吗？

相关问答

最新问答

风信子是不是再生植物

皮鞋鞋底怎么会有纸板

求类似夜愿乐队的she is my sin 的摇滚歌曲！！

谁有斗破苍穹漫画版的图片，萧薰儿，纳兰嫣然，萧炎的图片，多点啊。

去长沙世界之窗是只要付门票就可以玩全部的设施吗？还需要额外出钱吗？

高一时没好好学习,心里很后悔难受,没有奋斗的动力,怎么办？

软件测试应该学的书籍？我是计算机大专毕业，基础知识懂！想应聘软件测试。

学游戏设计与制作专业是去专门培训这方面的学院还是去专业学校，还有就是这个专业一般都是一年制的吗？？

我喜欢上自己的女下属该怎么办

我是今年毕业的大学生，关于就业协议、报到证以及干部身份有些疑问，烦请懂得这方面的朋友帮忙解答下。