Question

当使用slidetoggle单击相应的标题时，我正在滑动内容。现在我想同时在类之间切换。

我可以使用toggleclass并且无论单击哪一个标题都切换所有类，但是我只能切换与headerclicked对应的类。

这是我的代码：

<div class="Title ">
  <a class="Expanded" href="#">Title1<span id="span1" class="ArrowDown"></span></a>
</div>
<ul class="Content">
  <a href="#">
  <li class="selected">hello1</li></a> <a href="#">
  <li>hello2</li></a> 
</ul>

<div class="Title">
  <a class="Expanded" href="#">Title2<span id="span2" class="ArrowDown"></span> </a>
</div>
<ul class="Content">
  <a href="#">
    <li>hello3</li></a>
  <a href="#">
    <li>hij</li></a>
  </ul>

这是我的剧本：

$(document).ready(function(){
  $(".Title").click(function(){
    $(this).next(".Content").slideToggle("slow");
    $("#span1").toggleClass("ArrowUp", "ArrowDown");
  });
});

我只是把第一个跨度的id放在这里，但是我尝试了不同的东西，但是无法弄清楚要做什么...我希望在点击相应的标题时，在ArrowUp和ArrowDown之间切换跨度类（扩张或倒塌）。

Answer 1

在点击回调功能中，使用this关键字，并将其与.find()方法的强大功能相结合。

示例：

$('element').click(function() {
  $(this).find('span').toggleClass('myclass');
});

Answer 2

您还可以使用jQuery链接的强大功能将其写入单行中。

$(this).find('span').toggleClass("ArrowUp", "ArrowDown").end()
       .next(".Content").slideToggle("slow")
       ;

这里要注意的两件事是.find()（它获取由选择器过滤的匹配元素的后代）和.end()（它结束当前链中最近的过滤操作并返回一组匹配的元素到它以前的状态。）

Answer 3

$(this).find(' span').toggleClass("ArrowUp", "ArrowDown");

使用slidetoggle时如何在各个跨度的类之间切换？

3 个答案: