Question

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

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

我的HTML

async

我的js

<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>

我的css

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

这是一个jsfiddle：JSFIDDLE

Answer 1

<强>解释

我已经为你的小提琴添加了一个jQuery .click()函数。此函数会向当前.open添加.sidenav_wrapper类，并在.open中选择链接时从其他.sidenav_wrapper中删除.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');
});

在更新后的jsFiddle
中查看此内容

Answer 2

我设法让它运转起来。我所做的就是创建了一个php循环，使菜单项处于活动状态并创建了一个活动类，并使用该类来显示块。

如何保持侧边菜单打开

2 个答案: