4

我想单击一个特定的 div 并显示一个包含子元素的 div，然后在该 div 及其子元素之外单击时，该 div 及其子元素将再次设置为“显示：无”。单击显示的 div 的子元素时，以下代码不起作用，从而导致隐藏父 div。如何在以下代码中包含 event.target.id == 'menu-container' 中的所有子 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/

4

2 回答 2

4

这是小提琴。

$(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>
于 2013-02-13T02:23:55.043 回答
0

您可以添加一个布尔值来检查您的菜单 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>
于 2013-02-13T01:37:25.430 回答