JQuery Show Submenu If Parent Have Been Clicked

Could some one please help with code. I want to show the submenu only when submenu parent is clicked. HTML

• Item

Solution 1:

$('.sub-menu').hide();

$("li:has(ul)").click(function(){

$("ul",this).slideDown();
});

http://jsfiddle.net/3nigma/KhNCV/2/

OR

$('.sub-menu').hide();

$("li:has(ul)").click(function(){

$("ul",this).toggle('slow');
});

http://jsfiddle.net/3nigma/KhNCV/4/




Solution 2:

Here's your example working. It's unclear why you need the a tags, as you could use cursor: pointer in the CSS to make the li appear clickable. I'll assume you want to do some spiffy hovering on them in IE that's CSS only? If not, you could simplify by removing them.

Instead of doing hide() on .submenu, you should use CSS (parsed with DOM instead of onReady/load).

.sub-menu { display: none; }

And then here's you code to toggle the menus:

$('ul li a').click(function() {
    $(this).parent().find('ul.sub-menu').toggle();
    return false;
});




Solution 3:

$('.sub-menu').hide();

$("a").click(function(){

    $(this).parent().children("ul").toggle();

})

check out this link http://jsfiddle.net/KhNCV/6/




Solution 4:

$('li a').click(
function() {
    $(this).next().slideToggle();
})




Solution 5:

Try this

$(function(){

   //Hide all the sub menus
   $('.sub-menu').hide();

   $("li:has(ul)").click(function(){
      //Find the child ul and slideToggle
      $(this).children("ul").slideToggle();
   });
});

Share