javascript - jQuery - 切换单击两次

Question

这是我的代码(切换菜单):

$(function () {
    $('#menu li').click(function () {
        $('#menu li').removeClass("active");
        $(this).toggleClass("active");
    });
})      

工作完美。但是...如果我单击一个元素并再次单击它，切换不会关闭。我希望菜单在第二次单击后关闭。

$(function () {
    $('#menu li').click(function () {
        $(this).toggleClass("active");
    });
})      

如果我这样做，菜单会在第二次单击后关闭，但是...我可以展开其他菜单，而前一个菜单不会关闭。

如何结合这两种功能？

Answer 1

从所有其他 li 元素中删除该类时，只需通过链接 .not() 排除您刚刚单击的类即可。使用 this 作为参数的函数:

$(function () {
    $('#menu li').click(function () {
        $('#menu li').not(this).removeClass("active");
        $(this).toggleClass("active");
    });
})    

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>