Поиск дочерних элементов без идентификатора или класса

Question

У меня следующая структура кода:

<ul class='menu'>
    <li>
         Main Menu
         <ul class='hide'>
             <li>SubMenu1</li>
             <li>SubMenu2</li>
         </ul>
    </li>
    <li>
         Main2
         <ul class='hide'>
             <li>Sub1</li>
         </ul>
    </li>
</ul>

Есть ли способ для меня, чтобы событие jQuery щелкнуло по Main Menu и Main2 универсальным способом, который будет каждый раз удалять класс 'Hide' из правильных потомков?

Answer 1

Вот еще один способ, который использует делегирование события и запускается только при нажатии на элемент li, а не на его дочерние элементы:

$('ul.menu').on('click', 'ul.menu > li', function(e) {
    if(e.target === this) {
        $(this).children('ul').toggleClass('hide');
    }
});

DEMO

Answer 2

Не всегда делайте то, что вам говорит толпа, хотя бы подумайте об этом какое-то время!

Могу поспорить, что люди порекомендуют вам использовать селектор, например ul.menu > li, но помните, что это вызовет не только событие щелчка при нажатии на текст «Главное меню», но и при нажатии на любой из другой контент внутри соответствия li.

Если вы хотите реализовать переключатель «показать / скрыть», вам гораздо лучше обернуть текст «Главное меню» внутри элемента on, а затем использовать что-то, как показано ниже, чтобы изменить то, что вы можете изменить.

$(<main menu text selector>).siblings (<siblings selector>);

---

Все еще хотите / должны следовать за толпой?

Если это так, я бы порекомендовал вам, по крайней мере, сделать это с небольшим поворотом, чтобы предотвратить то, что я ранее описал.

( edit : исправлена ​​версия после прочтения документации по jquery для элементов)

$('ul.menu > li').click (function(e){
  if (e.target === this) {
    $(this).children ('.hide').removeClass ('hide');
  }
});

$("ul.menu > li").click (function () {
  $(this).find ('.hide').removeClass ('hide'); 
});

$("ul.menu > li > *").click (function () {
   return false; // prevent event from bubbling up 
});

---

Пример реализации рекомендуемой версии

Нижеприведенное связывает прослушиватель события click с .menu-toggle, когда событие вызывается у братьев и сестер (т. Е. Теги, которые находятся в той же области действия, что и нажатый .menu-toggle), соответствующие .hide, будут иметь свои class="hide" удалено.

Javascript

$(".menu-toggle").click (function () {
  $(this).siblings ('.hide').removeClass ('hide'); 
});

HTML

<ul class='menu'>
    <li>
        <span class="menu-toggle">Main Menu</span>
         <ul class='hide'>
             <li>SubMenu1</li>
             <li>SubMenu2</li>
         </ul>
    </li>
    <li>
         <span class="menu-toggle">Main2</span>
         <ul class='hide'>
             <li>Sub1</li>
         </ul>
    </li> </ul> 

---

Answer 3

$("ul.menu > li").on("click", function () {
    $(this).children("ul").removeClass("hide");
});

Пример: http://jsfiddle.net/dpkBL/

Answer 4

Посмотрите на дочерние селекторы .Я думаю, это то, что вы хотите.

$('.menu > li').click(function () { 
    $(this).children('ul').removeClass('hidden'); 
});