Селектора jQuery работает как CSS?

Question

Я пытаюсь изменить выпадающее меню из Кодекса капель здесь: http://tympanus.net/codrops/2013/03/05/horizontal-drop-down-menu/

Модификации:

• Добавить кнопку закрытия, которая закрывает меню
• Закройте меню, нажав в любом месте с меню

Я добавил значок закрытия, и значок, и пункт меню, который запускает раскрывающийся список, имеют класс .trigger. Однако я не понимаю, как заставить jQuery использовать все элементы с классом .trigge r - он будет использовать только первого ребенка и ничего глубже.

Вот JQuery, который, кажется, чтобы связать триггер:

var $listItems = $('.dropdown-menu'), 
    $menuItems = $listItems.children('.trigger'), 
    $body = $('body'), 
    current = -1; 

А вот разметка:

<div class="dropdown-menu"> 
    <ul> 
    <li> 
     <a class="trigger" href="#">Menu</a> 
     <div class="dropdown"> 
     <div class="dropdown-inner"> 
      <a class="trigger" href="#">Close</a> 
      <h4>Your cart</h4> 
     </div> 
     </div> 
    </li> 
    </ul> 
</div> 

Есть ли способ получить JQuery, чтобы увидеть кнопку Закрыть, которая еще пару уровни глубже?

И есть ли способ вызвать закрытие, если нажимается страница?

Надеюсь, что имеет смысл - любые указатели в правильном направлении были бы высоко оценены, поскольку поиск не дал ничего конкретного (возможно, не используя правильные условия поиска).

Приветствия

Бен

Answer 1

Ваша жизнь усложняется тем, что вы используете .trigger для нескольких типов объектов, так что вы должны определить, какой тип объекта селектором вы используете, прежде чем .trigger и .children() ищет только детей (не глубже).

Эта линия:

$menuItems = $listItems.children('.trigger'), 

будет выглядеть только для непосредственных детей $listItems которых не где .trigger есть. Вы, вероятно, хотите использовать .find() искать на всех потомков, и если вы хотите, чтобы избежать кнопку закрытия .trigger, то вы должны указать, какой контекст перед .trigger, чтобы получить только те, которые вы хотите:

$menuItems = $listItems.find('li > .trigger'), 

Это находит только .triggers, которые являются непосредственным потомком <li>.

---

Или просто сделать это в один селектор:

$menuItems = $('.dropdown-menu li > .trigger') 

---

Чтобы получить кнопку закрытия .trigger и только то, что триггер, вы можете сделать это:

$close = $(".dropdown-menu .dropdown .trigger") 

---

Если вы хотите привязать обработчик события к закрытию пункт в вашем HTML, вы можете сделать это:

$(".dropdown-menu .dropdown .trigger").click(function(e) { 
    // do whatever you want to do when the Close item is clicked 
    return false; 
}); 

Было бы намного легче целевой близко пункт меню отдельно, если вы дали ему уникальное имя класса.