JQuery проблемы выбора ребенка

Question

У меня есть базовая раскладка веб-сайта, которая выглядит следующим образом:

    <li class="folder parent_folder">
<a href="#">Some Folder</a>
<ul class="submenu">
    <li class="file"><a href="#">An awesome file</a></li>
    <li class="file"><a href="#">An awesome file</a></li>
    <li class="file"><a href="#">An awesome file</a></li>
    <li class="file"><a href="#">An awesome file</a></li>
    <li class="file"><a href="#">An awesome file</a></li>
    <li class="file"><a href="#">An awesome file</a></li>
</ul>

У меня есть несколько таких на странице сайта. Используя jquery, я пытаюсь сделать так, чтобы при нажатии «li.parent_folder» «ul.submenu» исчезало, а затем появлялось снова при повторном нажатии «li.parent_folder». Я могу заставить это сделать это, но у меня есть проблема. Когда я нажимаю на «li.parent_folder», все «ul.submenu» исчезают, а не только тот, который является его дочерним элементом.

Каким будет правильный код jquery для этого? (О, я использую JQuery UI также в этом проекте

Что у меня сейчас есть, так это:

$ ('li.parent_folder'). Click (function () { $ ('li.parent_folder> ul.submenu'). hide (); });

Answer 1

Попробуйте это

$('li.parent_folder').click(function() {

  // +this+ var refers to the +li+ that was clicked.

  // .children() gets the children of each element in the set of matched elements, optionally filtered by a selector.
  $(this).children('ul.submenu').hide();
});

Подробнее о jQuery .children() method

---

Edit:

обновлен метод с .find() до .children() на основании рекомендации @ Gumbo

Answer 2

$ не поддерживает никакого магического контекста - вам нужно будет сказать, хотите ли вы начать смотреть с определенного элемента. В четном обработчике this указывает на элемент, к которому прикреплен обработчик. Попробуйте

$(this).find(">ul.submenu").hide();