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

Question

I have tried below code , but it's not working 我已经尝试了下面的代码，但是没有用

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

i have tried using layer but when i am using layer then for another drop down i have to click TWO time to activate . 我已经尝试过使用图层，但是当我使用图层时，对于另一个下拉菜单，我必须单击TWO time激活。 so how to achieve this in 1 clock . 那么如何在1个时钟内实现这一目标。 2nd Attempt When there exist more than 1 drop down menu . 第二次尝试当存在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

You dont have to use that much of code for the purpose, use like this, 您不必为此目的使用太多的代码，像这样使用，

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

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

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

Demo 演示

Edit 编辑

The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed. event.stopPropagation()方法停止将事件冒泡到父元素，从而阻止执行任何父事件处理程序。

In the above code, I've written code for both document click and .menu click. 在上面的代码中，我为document单击和.menu单击编写了代码。 Since .menu is in the document itself, when i click on .menu , there will generate the click event of document too. 由于.menu位于文档本身中，因此当我单击.menu ，也会生成document的click事件。 Which will hide $(".menu_list") . 这将隐藏$(".menu_list") 。 So I need to prevent that behaviour. 因此，我需要防止这种行为。 Thats why i used event.stopPropagation() 那就是为什么我使用event.stopPropagation()

Update 更新

$(".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

I'd suggest using the stopPropagation() method as shown: 我建议使用stopPropagation（）方法，如下所示：

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

Answer 3

You can hide the drop down as follows 您可以隐藏下拉菜单，如下所示

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

Also, instead of checking the style attribute every time, i'd suggest using toggleClass() as follows 另外，我建议不要每次都检查style属性，而是建议使用toggleClass()

css CSS

.hidden {
 display:none;
}

js 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 的jsfiddle

Side note: the structure 旁注：结构

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

is semantically incorrect. 在语义上是错误的。

it should be 它应该是

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

Update 更新

For making it work with multiple drop downs, you need to use class es instead of id 's and tweak some html and css properties. 为了使其与多个下拉菜单一起使用，您需要使用es class而不是id ，并调整一些html和css属性。

HTML 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 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');
 });
});

After correcting the semantics and applying css fixes, the final solution would be like the following 纠正语义并应用cs修复后，最终解决方案将如下所示

JSFiddle 的jsfiddle

Side note: note that the answers using event.stopPropagation() method won't work with dynamically created elements. 旁注：请注意，使用event.stopPropagation()方法的答案不适用于动态创建的元素。 Since it prevents event delegation 由于它阻止事件委托

Answer 4

Try this script if you want to be able to close the list by clicking outside the menu_list. 如果您希望能够通过在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>

Try it out in jsfiddle, I made an example for you how it works: 在jsfiddle中尝试一下，我为您制作了一个示例：

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

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

问题描述

4 个解决方案

解决方案1
1 已采纳 2014-05-28 11:32:57

解决方案2
0 2014-05-28 11:25:07

解决方案3
0 2014-05-28 11:27:07

解决方案4
0 2014-05-28 12:17:45

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

问题描述

4 个解决方案

解决方案1 1 已采纳 2014-05-28 11:32:57

解决方案2 0 2014-05-28 11:25:07

解决方案3 0 2014-05-28 11:27:07

解决方案4 0 2014-05-28 12:17:45

解决方案1
1 已采纳 2014-05-28 11:32:57

解决方案2
0 2014-05-28 11:25:07

解决方案3
0 2014-05-28 11:27:07

解决方案4
0 2014-05-28 12:17:45