jQuery - 切换点击两次答案

【问题标题】：jQuery - toggle click two timesjQuery - 切换点击两次
【发布时间】：2021-07-08 12:31:35
【问题描述】：

这是我的代码（切换菜单）：

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

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

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

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

如何结合这两种功能？

【问题讨论】：

你能创建一个最小的可运行示例或添加一些示例 html 代码吗？

标签： javascript jquery wordpress

【解决方案1】：

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

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

【讨论】：

谢谢！完美运行！

【解决方案2】：

您可以使用removeClass()/addClass() 方法如下 sn-p。

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

li{
  background: #dddddd;
  margin: 6px 0;
  padding: 8px 10px;
  cursor: pointer;
}
.active {
  background: #00ff00;
  color: #0000ff;
}

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

【讨论】：