Question

我已尝试过以下代码，但它无效

<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>

我尝试过使用图层但是当我使用图层然后进行另一次下拉时我必须单击TWO time才能激活。那么如何在1个时钟内实现这一点。第二次尝试当存在more than 1 drop down menu .

时

<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>

Answer 1

你不必为此目的使用那么多代码，就像这样使用，

$(".menu").click(function (e) {
    e.stopPropagation();
    $(".menu_list").hide();
    $(this).next().show();

});
$(document).click(function (e) {

    $(".menu_list").hide();
});

Demo

修改

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(); });

Updated Demo

Answer 2

我建议使用stopPropagation（）方法，如下所示：

$('#close').click(function(e) {
    e.stopPropagation();
});

Answer 3

您可以按如下方式隐藏下拉列表

$(document).click(function(){
 if ($(e.target).attr('id') != 'menu')
 $('#menu_list').hide();
});

此外，我不建议每次都检查样式属性，而是建议使用toggleClass()，如下所示

CSS

.hidden {
 display:none;
}

JS

$(document).ready(function (e) {
 $('#menu').click(function () {
    $('#menu_list').toggleClass('hidden');
 });
 $('#menu_list').click(function () {
    $('#menu_list').addClass('hidden');;
 });
 $(document).click(function (e) {
    if ($(e.target).attr('id') != 'menu') $('#menu_list').addClass('hidden');
 });
});

JSFiddle

旁注： 结构

<div id="menu_list">
   <li>a</li>
   <li>a</li>
   <li>a</li>
   <li>a</li>
</div>

在语义上不正确。

应该是

<ul id="menu_list">
   <li>a</li>
   <li>a</li>
   <li>a</li>
   <li>a</li>
</ul>

<强>更新

为了使其适用于多个下拉菜单，您需要使用class es而不是id，并调整一些html和css属性。

HTML

<div class='dropdown'>
 <input type="button" class="menu" value="drop" />
 <ul class="menu_list hidden">
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
 </ul>
</div>

JS

$(document).ready(function (e) {
 $('.menu').click(function () {
    $(this).next('.menu_list').toggleClass('hidden');
 });
 $('.menu_list').click(function () {
    $(this).addClass('hidden');;
 });
 $(document).click(function (e) {
    if (!e.target.classList.contains('menu'))
      $('.menu_list').addClass('hidden');
 });
});

在纠正语义并应用css修复之后，最终的解决方案将如下所示

JSFiddle

旁注：请注意，使用event.stopPropagation()方法的答案不适用于动态创建的元素。因为它阻止了事件委托

Answer 4

如果您希望能够通过单击menu_list外部来关闭列表，请尝试使用此脚本。

  <script>
    $(document).click(function(e){
       if ($(e.target).attr('id') == 'menu')
          $('#menu_list').toggle();
       else
          $('#menu_list').hide();  
    });

    $('#menu_list').click(function(){
        $('#menu_list').hide();
    });
    </script>

在jsfiddle中尝试一下，我为你做了一个例子：

http://jsfiddle.net/LsZ53/52/

当用户点击下拉侧时，如何隐藏下拉菜单？

4 个答案: