如何用javascript实现点击图片触发下拉列表事件显示内容 50
在写网页时要美化下拉列表框的小图标，我是用一个div盖住了原来的图标，但这样的话点击图片无法实现显示下拉列表，请教大神如何实现点击图片时也能显示下拉列表框呢？...
在写网页时要美化下拉列表框的小图标，我是用一个div盖住了原来的图标，但这样的话点击图片无法实现显示下拉列表，请教大神如何实现点击图片时也能显示下拉列表框呢？
展开
6个回答
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<style type="text/css">
.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;}
</style>
</head>
<body>
<div class="combox">
<div class="combox_div">
<span class="combox_text">按时间</span>
<span class="combox_cursor" title="下拉菜单">▽</span>
</div>
<div class="combox_list">
<a>按时间</a>
<a>按人气</a>
</div>
</div>
<script type="text/javascript">
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;
}
}
</script>
</body>
</html>
效果如图：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这种下拉列表都是通过JS来模仿下拉列表样式
首先你的下拉列表内容实际上市存在的,只不过display:none
当点击按钮的时候设置display:block即可
首先你的下拉列表内容实际上市存在的,只不过display:none
当点击按钮的时候设置display:block即可
更多追问追答
追问
能不能在我现有的方式下实现？
追答
代码贴一下
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
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';
}
}
var div = ducument.getElementById("div");
img.onclick = function(){
if(div.style.display=="block")
{
div.style.display='none';
}
else
{
div.style.display='block';
}
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
先要获取到这个元素的dom， 绑定点击事件， 事件方法里面就触发select的点击事件，简单明了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
解决了吗？
追问
没.....
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
