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

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

javascript jquery html css

Javascript 当用户单击下拉菜单的外侧时，如何隐藏下拉菜单？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试过下面的代码，但不起作用 <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')

我试过下面的代码，但不起作用

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

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

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

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

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

另外，我建议使用

toggleClass（）

，而不是每次都检查style属性，如下所示

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

css

旁注：结构

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

更正语义并应用css修复后，最终的解决方案如下

旁注：请注意，使用

event.stopPropagation（）

方法的答案不能用于动态创建的元素。由于它可以防止事件委派

您不必为此目的使用那么多代码，请这样使用

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

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

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

编辑

event.stopPropagation（）

方法停止向父元素冒泡事件，防止执行任何父事件处理程序

在上面的代码中，我为

文档

单击和

菜单

单击编写了代码。由于

.menu

在文档本身中，当我单击

.menu

时，也会生成

文档

的单击事件。这将隐藏

$（“.menu\u 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();
});

如果您想通过在菜单列表外单击来关闭列表，请尝试此脚本

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


$（文档）。单击（函数（e）{
if（$（e.target）.attr（'id'）=='menu'）
$（'#菜单列表'）。切换（）；
其他的
$（“#菜单列表”）.hide（）；
});
$（“#菜单_列表”）。单击（函数（）{
$（“#菜单列表”）.hide（）；
});

在JSFIDLE中尝试一下，我为您举了一个例子：

你能为那把小提琴提供小提琴吗？你能详细说明什么是stopPropagation（）吗？我已经读过了，但没有得到，我必须在哪里使用以及如何使用它？防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知。嘿，你能详细说明什么是e.stopPropagation（）吗？这个事件的效果是什么？这段代码是如何工作的？当用户单击显示的菜单时如何隐藏。@user3610792您能解释一下您的需要吗？是的，当用户再次单击drop1时，它应该隐藏当时显示的菜单列表。谢谢，当您开始在项目中使用JQuery时？感谢您指出语义错误。这是怎么回事呢？这也是不正确的，列表项应该在列表中……）为什么在这里使用

。。？您可以使用

来代替，对吧..？因为“a”是内联元素，所以很难设置“a”标记的样式，所以我使用了“li”。是的，我可以用Div。

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

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

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

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

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

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

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