我试过下面的代码，但它不工作
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
$('#menu').click(function(){
if($('#menu_list').css('display')=='none')
$('#menu_list').show();
else
$('#menu_list').hide();
});
$('#menu_list').click(function(){
$('#menu_list').hide();
}
);
});
</script>
<style>
#menu_list li:hover{
background:#C9C;
}
#menu{
position:relative;
z-index:3;
}
#menu_list{
background:#C90;
width:30px;
list-style:none;
position:absolute;
z-index:4;
}
#menulist li{
padding:3px;
}
</style>
<body>
<input type="button" id="menu" value="drop" />
<div id="menu_list">
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</div>
</body>
我尝试过使用图层，但是当我使用图层时，对于另一个下拉菜单，我必须单击两次 才能激活。那么如何在 1 个时钟内实现这一目标。
第二次尝试当存在超过 1 个下拉菜单时。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var hide = ['#list1','#list2'];
$(document).ready(function(e) {
$('#a').click(function (){
if($('#list1').css('display')=='none'){
$('#list1').show();
$('#close').show();
}
else {
$('#close').hide();
$('#list1').hide();
}
});
$('#close').click(function(){
for(i=0;i<hide.length;i++){
$(hide[i]).hide();
}
$('#close').hide();
});
$('#b').click(function(){
if($('#list2').css('display')=='none'){
$('#list1').hide();
$('#list2').show();
$('#close').show();
}
else {
$('#list2').hide();
$('#close').hide();
}
});
});
</script>
<style>
#menu_list li:hover{
background:#C9C;
}
#menu{
position:relative;
z-index:3;
}
.menu_list{
background:#C90;
width:30px;
list-style:none;
position:absolute;
z-index:4;
display:none;
}
#menulist li{
padding:3px;
}
#close{
position:absolute;
height:100%;
width:100%;
left:0;
top:0;
z-index:3;
display:none;
}
.l{
float:left;
position:relative;
}
</style>
<body>
<div id="close">
</div>
<div class="l">
<input type="button" class="menu" id="a" value="drop1" />
<div class="menu_list" id="list1">
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</div>
</div>
<div class="l">
<input type="button" class="menu" value="drop2" id="b"/>
<div class="menu_list" id="list2">
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
</div>
</div>
</body>
最佳答案
你不必为此目的使用那么多代码，像这样使用，
$(".menu").click(function (e) {
e.stopPropagation();
$(".menu_list").hide();
$(this).next().show();
});
$(document).click(function (e) {
$(".menu_list").hide();
});
编辑
event.stopPropagation() 方法停止将事件冒泡到父元素，从而阻止执行任何父事件处理程序。
在上面的代码中，我为document 点击和.menu 点击都写了代码。由于 .menu 在文档本身中，当我点击 .menu 时，也会产生 document 的点击事件。这将隐藏 $(".menu_list")。所以我需要防止这种行为。这就是我使用 event.stopPropagation()
更新
$(".menu").click(function (e) {
e.stopPropagation();
$(".menu_list").not($(this).next()).hide();
$(this).next().toggle();
});
$(".menu_list").find("li").click(function (e) {
e.stopPropagation();
alert($(this).text());
});
$(document).click(function (e) {
$(".menu_list").hide();
});
关于javascript - 当用户点击下拉菜单时如何隐藏下拉菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23910241/