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

我有一个副菜单，如下所示：

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

正如您所看到的，它应该切换孩子

对于开始隐藏，我使用以下css：

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

问题在于，在单击应打开幻灯片的按钮后，幻灯片被触发关闭

---

这里是jsiddle:

尝试下面的解决方案

$(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建议

---

请参见下面的解决方案

$(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建议

---

请参见

我认为问题在于以下规则，即在

li

元素中隐藏

a

元素

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

我认为应该是这样的，因为

dontHide

类应用于

li

元素，而不是其子元素

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

---

演示：

我认为问题在于以下规则，即在

li

元素中隐藏

a

元素

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

我认为应该是这样的，因为

dontHide

类应用于

li

元素，而不是其子元素

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

---

演示：

即使在小提琴中，我们也可以看到它对第一和第二个菜单不起作用。即使在小提琴中，我们也可以看到它对第一和第二个菜单不起作用。如果你否决了这个问题，请告诉我为什么……如果你否决了这个问题，请告诉我为什么……谢谢。所以问题只是关于li和not之间的空白。@szpic但这改变了ruleThx的完整含义。所以问题只是关于李和不李之间的空白，但这改变了规则的完整含义