Question

我想点击一个特定的div并显示一个包含子元素的div，然后当点击该div及其子元素的外部时，div及其子元素将被设置为＆＃39; display：none＆＃39;再次。单击显示的div的子元素时，以下代码不起作用，从而导致隐藏父div。如何在event.target.id ==＆＃39; menu-container＆＃39;中包含所有子div。在以下代码中？

<body>
  <div id = "screen">
        <div id = "menu-container">
            <li class = "menu-options">
                <ul>option-1</ul>
                <ul>option-2</ul>
                <ul>option-3</ul>
            </li>
        </div>
        <div id = "bottom-panel">
            <div id = "menu-button">
            CLICK HERE FOR MENU
            </div>
        </div>
  </div>
 <body>

JQuery

$(document).ready(function() {
$('body').click(function(event){
    if ( event.target.id == 'menu-button'){
        $("#menu-container").show();
    }else if(event.target.id == 'menu-container'){

        return true;
    }else{
        $('#menu-container').hide();
    }
});
});

http://jsfiddle.net/ecABg/

Answer 1

这是fiddle。

$(document).ready(function() {
    $('body').click(function(event){
        if ( event.target.id == 'menu-button'){
            $("#menu-container").show();
        } 
        else if (event.target.id == 'menu-container' || 
                    $(event.target).parents('#menu-container').length > 0)
        {
            return true;
        } else {
            $('#menu-container').hide();
        }
    });
});

另外你应该更正你的清单，它应该是：

<ul class="menu-options">
    <li>option-1</li>
    <li>option-2</li>
    <li>option-3</li>
</ul>

Answer 2

您可以添加一个布尔值来检查菜单ID是否打开，如下所示。

$(document).ready(function() {
  $('body').click(function(event){
    console.log(event.target);
    if (event.target.id == 'menu-button'){
        $("#menu-container").show();
    }else if($(event.target).hasClass("menu")){
        return true;
    }else{
        $('#menu-container').hide();
    }
  });
});

此外，您的HTML代码似乎很重要，我会使用：

<ul class = "menu-options">
  <li class="menu">option-1</li>
  <li class="menu">option-2</li>
  <li class="menu">option-3</li>
</ul>

如何在JQuery中定位div id，包括所有子元素

2 个答案: