Question

我有一个如下所示的旁边菜单：

 <div class="col-sm-3 col-md-2 sidebar">
        <ul class="sideMenu nav nav-sidebar">
            <li class="dontHide">First menu</li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
        </ul>
        <ul class="sideMenu nav nav-sidebar">
            <li class="dontHide">test2</li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
        </ul>
        <ul class="sideMenu nav nav-sidebar">
            <li class="dontHide">test3</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

    </div>

nav和nav-sidebar是bootstrap个类这里是jquery代码：

    $(document).ready(function () {
    $('.sideMenu').on('click', function (e) {
        $(this).children(':not(.dontHide)').slideToggle();
        console.log("Clicked")
    });
})

你可以看到它应该切换孩子

开始隐藏我使用这个css：

.nav-sidebar > li :not(.dontHide){
display:none;
}

问题在于，在点击之后触发幻灯片关闭，应该打开它。

这里是Jsfiddle：CLICK

Answer 1

我认为问题是以下规则，它将a元素隐藏在li元素中。

.nav-sidebar > li :not(.dontHide){
    display:none;
}

我认为应该是 - 因为dontHide类适用于li元素而不是其后代

.nav-sidebar > li:not(.dontHide){
    display:none;
}

演示：Fiddle

Answer 2

尝试以下解决方案

$(document).ready(function () {
        $('.sideMenu').on('click', function (e) {
            if( $(this).children(':not(.dontHide)').is(":visible"))
            {
                            $(this).children(':not(.dontHide)').slideUp();

            }else{
                            $(this).children(':not(.dontHide)').slideDown();

            }
            console.log("Clicked")
        });
    })

注意在css中关注 Arun P Johny 建议

参见 UPDATED DEMO

打开后触发的Jquery slideToggle关闭事件

2 个答案: