Как сохранить родительские детали при нажатии на дочернее меню в jquery

Question

У меня есть меню, разработанное с использованием jQuery в oracle apex. Меню выглядит так

Parent1
    child1
    child2
parent2
    child3
    child4
parent3
    child5
    child6

Моя проблема в том, что, когда я нажимаю на parent1, должны отображаться только child1 и child2, но в моем случае каждый родитель расширяется. И пользователь может видеть всех детей. Что не должно произойти, пользователи должны видеть только данные о родительских и дочерних элементах, по которым щелкнули.

Мой код выглядит следующим образом.

$(document).ready(function() {
    var msg = false;
    $('.dropdown_menu').click(function() {
        msg = !msg;
        if (msg)
            $(this).parents('.parent_menu').find('.child_menu').slideDown("slow");
        else
            $('.child_menu').hide();
        return false;
    });
});

Answer 1

Просто поменяй родителей на единственного родителя. Хотя оба находят предков элемента, область действия различна.

.parent () ищет только ближайшего родителя.

.parents () находит всех родителей вплоть до основания дерева DOM.

РЕДАКТИРОВАТЬ1: Я должен быть тупым, в то время как вышеизложенное верно, вы указываете, чтобы щелкнуть РОДИТЕЛЬ элементов, а не детей - теперь, когда у меня есть очки:

.children () будет правильным селектором этого (от родителей детей, конечно, как вы указали.

so $ (this) .children (). код, чтобы делать то, что вы хотите здесь.

изменение:

 $(this).parents('.parent_menu').find('.child_menu').slideDown("slow");

Это выберет дочерние элементы .parent_menu от моего родителя, в котором говорится "все элементы .parent_menu и все .child_menu в этом.

до

$(this).children().slideDown("slow");

Это выбирает только МОИ (это) ближайшие дети. Если у вас есть другие дети (другие классы), вы можете указать это далее:

$(this).children('.child_menu').slideDown("slow");

Edit2: примечание с одной стороны: неясно, применяется ли класс, к которому у вас есть событие .click, к каждому родителю (parent1, parent2 и т. Д.) Или к родительскому элементу parent1, parent2 и т. Д., Что изменит область действия Захват событий .click, я предполагаю, что класс применяется на уровне parent1, parent2 и т. д.

Answer 2

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

Этот скрипт должен работать с предоставленным вами HTML:

$(document).ready(function(){
 // disable links in the menu
 $('#menu a').click(function(){
  return false
 });
 // hide child menus
 $('.child_menu').hide();
 // enable accordian menu
 $('.dropdown_menu').click(function() {
  $(this).parent().find('.child_menu').toggle("slow");
  return false;
 });
});

---

Изменить: я сделал следующие изменения:

• Я отключил только ссылки dropdown_menu, поэтому теперь ссылки child_menu будут работать
• Чтобы закрыть другие дочерние меню при нажатии на нового родителя, я добавил «активный» класс, а затем просто скрыл его при нажатии.
• Сценарий теперь просматривает хеш окна для идентификатора местоположения из дочернего меню, чтобы определить, какое дочернее меню отображать. Я не знаю, как вы меняете ссылки на дочерние меню (я не мог просто войти и добавить идентификатор к этому: "f: NO :: P17_LOCATION_ID: 17"), но каким-то образом вам нужно добавить идентификатор местоположения ( как #17) до конца ссылки: http://www.mysite.com/somepage.htm#17. Скрипт возьмет этот URL и найдет идентификатор местоположения 17 и откроет дочернее меню Бельгии, когда найдет идентификатор в конце href (см. Эту ссылку jQuery на селекторе, который я использовал ).
• Редактировать # 2: Забыл, чтобы запретить щелкать по родительскому элементу, чтобы скрыть ребенка, как вы просили, поэтому теперь щелкнув по другому родителю, ребенок будет скрыт.

Использование этого HTML (вы указали в комментарии ниже):

<div id="menu">
 <div class="parent_menu">
  <a class="dropdown_menu" href="f:P17_LOCATION_ID:8">Belgium</a>
  <div class="child_menu">
   <li>
    <a href="f:NO::P17_LOCATION_ID:17">Ch1</a>
   </li>
   <li>
    <a href="f:NO::P17_LOCATION_ID:27">Ch2</a>
   </li>
  </div>
 </div>

 <div class="parent_menu">
  <a class="dropdown_menu" href="f?p=102:17:100173801651673::NO::P17_LOCATION_ID:35">Germany</a>
  <div class="child_menu">
   <li>
    <a href="f?p=102:17::NO::P17_LOCATION_ID:36">Ch3</a>
   </li>
   <li>
    <a href="f?p=102:17:NO::P17_LOCATION_ID:37">Ch4</a>
   </li>
  </div>
 </div>

</div>

С помощью этого скрипта:

$(document).ready(function(){
 // disable accordion links in the menu
 $('.dropdown_menu a').click(function(){
  return false
 });
 // hide child menus
 $('.child_menu').hide();
 // get current location ID from window hash
 var hid = window.location.hash;
 hid = hid.substring(1,hid.length);
 // find and open child menu that matches the ID
 $('.child_menu a[href$="' + hid + '"]').closest('.child_menu').addClass('active').slideDown("slow");
 // enable accordian menu
 $('.dropdown_menu').click(function() {
  // prevent hiding the child menu if it's already open
  if ($(this).parent().find('.child_menu').hasClass('.active')) return false;
  // find previously active menu and close it and open current one
  $('.active').removeClass('active').slideUp("slow");
  $(this).parent().find('.child_menu').addClass('active').toggle("slow");
  return false;
 });
});

Наконец, скрипт, который вы только что добавили в комментарии, я ничего не могу с этим поделать, если вы не предоставите и HTML.

Answer 3

Попробуйте:

$(document).ready(
    function(){ 
      var msg = false; 
      $('.child_menu').click(
         function() { 
           msg = !msg; 
           if (msg) 
             //I have only ONE parent. Pick him, and all his children.
             $(this).parent().find('.child_menu').slideDown("slow"); 
           else 
             $('.child_menu').hide(); 
           return false; 
          }
       ); 
     }
);