Jquery slideToggle 关闭事件在打开后立即触发

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")
    });
})

如您所见，它应该切换 child

为了开始隐藏，我使用这个 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