Как таргетировать div id, включая все дочерние элементы в JQuery

Я хочу щелкнуть конкретный div и отобразить div, содержащий дочерние элементы, а затем, щелкнув за пределами этого div и его дочерних элементов, будет установлен div и его дочерние элементы снова отобразить: none. Следующий код не работает при нажатии дочерних элементов отображаемого div и, следовательно, приводит к скрытию родительского div. Как включить все дочерние div в event.target.id == 'menu-container' в следующем коде?Как таргетировать div id, включая все дочерние элементы в JQuery

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

источник

2013-02-13 Emanegux

Вот 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>

источник

2013-02-13 02:23:55

Ваше решение работает только для дочерних элементов div div = «menu-options», а не для всех дочерних элементов div id = «menu-container». Вы можете увидеть это, щелкнув над верхней улицей и под границей # menu-container. Добавление .menu-options для дочерних элементов - это решение, но это не самое эффективное решение. – Emanegux

@Emanegux См. Обновленный код и скрипку: http://jsfiddle.net/onury/ecABg/4/ –

это работает для любого уровня дочерних элементов в контейнере div # меню и позволяет мне пропускать class = "menu-options ». Это наиболее эффективное решение, на которое я мог бы надеяться. – Emanegux

Вы можете добавить логическое значение для проверки, если ваше меню 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 код кажется incorret мне, я хотел бы использовать:

<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-13 01:37:25 Kaeros

это еще не предназначаться для дочерних элементов и приводит к тому же результату, что и код, который я разместил. – Emanegux

Извините, просто отредактировал ответ. Я добавил класс для каждого li, и теперь я проверяю, добавлен ли элемент в класс. – Kaeros

Как таргетировать div id, включая все дочерние элементы в JQuery

ответ

Смежные вопросы