CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kaspars Milbergs
Kaspars Milbergs

Reputation: 784

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

<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a>
    <ul class="sub-menu">
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
    </ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a>
    <ul class="sub-menu">
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
    </ul>
</li>
<li><a href="#">Item</a></li>
</ul>

So if you click on the parent submenu will show.

Here is fiddle link - http://jsfiddle.net/KhNCV/1/

Upvotes: 6

Views: 29038

Answers (5)

erimerturk
erimerturk

Reputation: 4288

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

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

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

})

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

Upvotes: 2

ShankarSangoli
ShankarSangoli

Reputation: 69905

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

Upvotes: 0

Paul Kearney - pk
Paul Kearney - pk

Reputation: 5533

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

Upvotes: 1

Kato
Kato

Reputation: 40582

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

Upvotes: 2

Rafay
Rafay

Reputation: 31033

$('.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/

Upvotes: 10

Related Questions