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 に答える