CODEWITHSUNDEEP
jquerywordpress
jan199674
jan199674

Reputation: 753

Keep submenu open after clicking a link

How do i make the corresponding sub-menu stay visible after clicking a link?

I should say im using a custom menu in Wordpress - in Wordpress i have added class "first" for all primary menu-items, and class "second" for all links in submenus.

The CSS for .second is:

.second {
   display: none;
}

Here is the JQuery:

$('.first > a').click(function(event) {
   event.preventDefault();
});

$('.first').click(function() { 
   $(this).find('.second').show();
});

Upvotes: 0

Views: 2463

Answers (1)

Stickers
Stickers

Reputation: 78686

Assuming the markup like the following code. If item has submenu, show/hide the submenu on click, otherwise open the link directly.

// hide all the sub menus
$('#nav > li > ul').hide();

// show/hide sub menu if it exists
$('#nav > li > a').click(function () {
    var $ul = $(this).siblings('ul');
    if ($ul.length > 0) {
        $ul.toggle();
        return false;
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul id="nav">
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="#">Team</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </li>
</ul>

Upvotes: 1

Related Questions