Question

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

});

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

Answer 1

一种方法是为每个折叠元素添加data-id。例如：

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

当然，为了防止手风琴中有很多标签，你应该在标签中使用一个类：

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

JS代码可能如下所示：

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

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

Answer 2

如果您的HTML看起来像这样，您可以使用next()函数来定位下一个兄弟元素：

$("#top11, #top12, #top13").click(function() {
	$("#top11, #top12, #top13").next().removeClass("in");
	$(this).next().addClass("in");
});

.in {
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top11">top11</div>
<div id="collapse201" class="in">collapse201</div>
<div id="top12">top12</div>
<div id="collapse202" class="in">collapse202</div>
<div id="top13">top13</div>
<div id="collapse203" class="in">collapse203</div>

使无限的jQuery变得简单易行

2 个答案: