Javascript 使一个无休止的jQuery简短而简单

我的WordPress网站上有一个手风琴

通常情况下，它工作正常，在单击不同选项卡时添加和删除类，但网站上的一个手风琴存在一个问题：当单击其中一个选项卡时，它不会关闭其余打开的选项卡。因此，我在中添加了此代码，它运行良好：

jQuery(document).ready(function($) {
  $("#top11").click(function() {
    $("#collapse202").removeClass("in");
    $("#collapse203").removeClass("in");
  });
  $("#top12").click(function() {
    $("#collapse201").removeClass("in");
    $("#collapse203").removeClass("in");
  });
  $("#top13").click(function() {
    $("#collapse201").removeClass("in");
    $("#collapse202").removeClass("in");
  });

});

我确信有一种方法可以使它更短，请解释一下如何使它更紧凑？

一种方法是向每个折叠的元素添加数据id。例如：

<div id="collapse201" data-id="top11"></div>
<div id="collapse202" data-id="top12"></div>
<div id="collapse203" data-id="top13"></div>

---

当然有更有效的方法来解决你的问题。但是对于这个特殊的问题，这可能是一个特殊的解决方案。

如果您的HTML看起来像这样，您可以使用下一个函数来针对下一个同级元素：

$top11、top12、top13.clickfunction{ $top11、top12、top13.next.removeClassin； $this.next.addClassin； }; .在{ 颜色：红色； } 前11名 塌陷201 前12名 塌陷202 前13名

---

collapse203我们应该猜出有问题的手风琴是什么样子的？给他们一个共享类，然后关闭该类的所有选项卡。然后使用它的id打开特定的选项卡。不需要给它们都指定一个特殊的类，只需使用jQuery选择所有同级并关闭它们就足够了。这么说，你需要像@Shomz所说的那样分享你的HTML。HTML是什么样子的？如果有50个标签呢？你能把它们一一列出吗？一直到$top01、top02、top03、top04、…..、top50。单击功能$top01、top02、top03、top04、…..、top50？与上面的注释相同。如果有50个标签呢？你能逐一列出他们中的每一个吗，全部50个吗？@JeremyThille Polities。首先，你一定是疯了才做一个50张的手风琴。用户友好设计？从没听说过。第二，正如我所指出的，可能有更好的解决办法。当然，我会使用一个类而不是50个ID，但由于作者从未提供HTML代码…@JeremyThille忘了说，尽管如此，你还是有一个观点，我编辑了关于你评论的答案。当然，你永远不会制作50个标签的手风琴。这完全是关于编程逻辑的。使用类比列出ID要好得多，您的编辑是正确的。这篇文章是关于代码改进的，所以。。。值得投票：

<div id="top11" class="clickingTab"></div>
<div id="top12" class="clickingTab"></div>
<div id="top12" class="clickingTab"></div>

jQuery(document).ready(function($) {
  $(".clickingTab").click(function() {
    var clickedId = $(this).attr("id");
    $("element:not([data-id="+clickedId+"])").removeClass("in");
  });
});