站点更改后仍保持打开状态的jQuery Dropdown –帮助新手

Question

I need a jQuery dropdown that stays open after a submenu-item was clicked and the user is forwarded to the subpage.

I'm toggling my dropdown with this code and I guess I need to add a class to the ul.submenu and toggle the visibility of this with CSS?

http://jsfiddle.net/erL8Lc0s/9/

$(function () {

// Dropdown toggle
$('.dropdown-toggle a').click(function () {
    $(this).next('.sub-menu').toggle();

});

$(document).click(function (e) {
    var target = e.target;
    if (!$(target).is('.dropdown-toggle a') && !$(target).parents().is('.dropdown-toggle a')) {
        $('.sub-menu').hide();
    }
});

});

Unfortunately I'm a jQuery-noob and I can't get my head around this problem

Answer 1

There are a few ways to achieve this, however it's unlikely you'll get a straight-forward answer here, and here's why:

What you're trying to do is show an element, depending on what page the user is currently viewing. There are a few ways to achieve this, but which one depends on the specific circumstances of the problem. Here are a few ways:

1. You've stated you're using WordPress. Great, WordPress makes the page ID visible, so within your theme you could easily add an override class to the element (such as class="show" ) depending on the page ID. However, this means you'll have to keep a list of page IDs up-to-date.

2. Moving on from the above, you could use PHP to grab the current URI, and show the correct element based on that.

3. Just use WordPress's default menus. You can amend the markup with a navigation crawler. It looks like you're using Bootstrap, so there's a premade one available . Now WordPress will automagically add active classes to the nav elements if you're on that page. You can then use CSS to keep those elements open.