jquery - 如何保持侧面菜单打开

Question

我试图让我的侧边菜单在用户单击其中一个子菜单项时保持打开状态。例如，如果我将鼠标悬停在第 1 节上，则会显示第 2 节，如果我单击第 2 节，则会显示第 2 节的内容，但第 1 节仍然打开并且不会关闭，除非我单击第 4 节，它是第 3 节。

我的问题是当子菜单项打开时我无法让它保持打开状态。

我的html

<div id="second-menu" class="collapse navbar-collapse menu_two">
    <ul class="nav navbar-nav inside-nav">
        <li class="sub_menu">
            <a href="#">Section 1</a>
            <ul class="sidenav_wrapper">
                <li class="sidenav_item sidenavlast">
                    <a href="#">Section 2</a>
                </li>
            </ul>
        </li>
        <li class="active_sub_menu">
            <a href="#">Section 3</a>
            <ul class="sidenav_wrapper">
                <li class="sidenav_item">
                    <a href="#">Section 4</a>
                </li>
                <li class="sidenav_item">
                    <a href="#">Section 5</a>
                </li>
                <li class="sidenav_item">
                    <a href="#">Section 6</a>
                </li>
                <li class="sidenav_item sidenavlast">
                    <a href="#">Section 7</a>
                </li>
            </ul>
        </li>
        <li class="sub_menu">
            <a href="#">Section 8</a>
            <ul class="sidenav_wrapper">
                <li class="sidenav_item">
                    <a href="#">Section 9</a>
                </li>
                <li class="sidenav_item">
                    <a href="#">Section 10</a>
                </li>
                <li class="sidenav_item sidenavlast">
                    <a href="#">Section 11</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

我的 js

    $('ul.navbar-nav li').hover(
    function () {
        $(this).find('.sidenav_wrapper:first').css('display','block');
    },
    function () {
        $(this).find('.sidenav_wrapper:first').css('display','none');  
    }
);

我的CSS

.menu_two {
    border-left: 16px solid #dfdfdf;
    padding-left: 0;
}

.sidenav_wrapper {
    background: none repeat scroll 0 0 #e7ecf5;
    border-left: 6px solid #8fb8e6;
    display: none;
    padding: 0;
}

这是一个 jsfiddle:JSFIDDLE

Answer 1

解释

我已经在您的 fiddle 中添加了一个 jQuery .click() 函数。此函数将 .open 类添加到当前 .sidenav_wrapper 并从另一个 .sidenav_wrapper 中删除 .open 类> 当在 .sidenav_wrapper 中选择链接时。 e.preventDefault() 阻止超链接的默认操作。这不会将浏览器带到其他 URL。

CSS

.open {
    display: block !important;
}

jQuery

$('.sidenav_wrapper').click(function(e) {
    e.preventDefault();
    $('.sidenav_wrapper').removeClass('open');
    $(this).addClass('open');
});

Check this in the updated jsFiddle