jQuery navigation-items with nested submenus should open on click

Question

I need to add a second level of submenus here.

Is there a dynamic solution, so only one submenu is opened, when clicking on the link? And when clicking a link to a submenu (in the first submenu), then open this one? And so on…

I already changed the jsfiddle a little, to have one level of sublevels more: http://jsfiddle.net/cRsZE/363/

Working example with one level of submenus: JSFiddle Demo

HTML:

<ul id="nav">
    <li>Home</li>
    <li class="parent">About
        <ul class="sub-nav">
            <li>Johnny</li>
            <li>Julie</li>
            <li>Jamie</li>
        </ul>
    </li>
    <li>Contact</li>
</ul>

CSS:

#nav ul.sub-nav {
    display: none;
}

#nav ul.visible {
    display: block;
}

jQuery:

$(document).ready(function() {
    $('.parent').click(function() {
        $('.sub-nav').toggleClass('visible');
    });
});

Source: Creating Drop Down Menu on click CSS

Rajaprabhu Aravindasamy · Accepted Answer · 2014-05-22 11:21:42Z

0

Try,

CSS:

.hidden {
  display: none;
}

JS:

$('ul ul').addClass('hidden');

$(document).ready(function () {
    $('.parent').click(function (e) {
        e.stopPropagation();
        $(this).find('ul').first().toggleClass('hidden');
    });
});

DEMO

answered May 22, 2014 at 11:21

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3478235 Over a year ago

Thanks for this! The example works, but I cannot use it this way in my project. Is there a way without adding a class in the beginning before anything happens?

Rajaprabhu Aravindasamy Over a year ago

@mandar1ne let me know if the given solution works for you.. :)

user3478235 Over a year ago

"visible" isn't used anywhere, or am I getting this wrong?

Rajaprabhu Aravindasamy Over a year ago

@mandar1ne That is unnecessary basically. Is that working in your website.?

user3478235 Over a year ago

No, unfortunately not. At first it works but then it kinda refreshes and is like it was before (so, then menu is "closed" again).

Collectives™ on Stack Overflow

jQuery navigation-items with nested submenus should open on click

1 Answer 1

DEMO

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related