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

Question

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

我可以使用toggleclass并切换所有类，无论单击哪一个标题，但我在仅切换与单击的标题相对应的类时遇到了麻烦。

这是我的代码:

<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

您还可以使用 jQuery 链接的强大功能将其写在一行中，如下所示。

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

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