How to conserve parent detail when clicked on child menu in jquery

Question

Hi,

I have menu designed using jQuery in oracle apex.The menu is like this

Parent1
    child1
    child2
parent2
    child3
    child4
parent3
    child5
    child6

My problem is when I click on parent1 only child1 and child2 should display but in my case each parent gets expanded. And the user can see all the childs. Which should not happen users should only be able to see the clicked parent and child details.

My code is as follows.

$(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

Try:

$(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; 
          }
       ); 
     }
);

Answer 2

Just change parents to the singular parent. While both find the ancesters of the element, the scope is different.

.parent() searches the immediate parent only.

.parents() finds all parents up to the base of the DOM tree.

EDIT1: I must be dumb, while the above is true, you indicate to click the PARENT of the elements, not the children - now that I have my glasses on:

.children() would be the correct selector of that (from the parent of the children of course, as you indicated.

so $(this).children(). code to do what you want here.

change:

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

This will select the .parent_menu items children from my parent, which says "all .parent_menu items and all .child_menu within that.

to

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

This select only MY (this) immediate children. IF you happen to have other children (other classes) you can specify it futher with:

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

Edit2:one side note: it is unclear if the class you have the .click event on is applied at each parent (parent1, parent2 etc) or to the parent of parent1, parent2 etc. which would change the scope of the .click event capture, I make the assumption that the class is applied at the parent1, parent2 etc level.

Answer 3

It would have helped a great deal if you would have provided some HTML. So, I'm assuming you are using this HTML Sorry I see the comment where you did provide some.

This script should work with the HTML you provided:

$(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;
 });
});

---

Edit: I made the following changes:

• I only disabled the dropdown_menu links, so the child_menu links will now work
• To make the other child menus close when clicking on a new parent, I added an "active" class, then just hid that when you click.
• The script now looks at the window hash for the location ID from the child menu to determine which child menu to display. I don't know how you are changing your child menu links (I couldn't just go in and add the id to this: "f:NO::P17_LOCATION_ID:17"), but somehow you need to add the location id ( like #17) to the end of the link: http://www.mysite.com/somepage.htm#17. The script will take this URL and find the location ID is 17 and open the Belgium child menu when it finds the ID at the end of the href (see this jQuery reference on the selector I used).
• Edit#2: Forgot to prevent clicking the parent from hiding the child as you requested, so now only clicking another parent will hide the child.

Using this HTML (you provided in a comment below):

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

With this script:

$(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;
 });
});

Lastly, the script you just added in the comments, I can't do anything with that unless you provide the HTML as well.