2

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

我可以使用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 之间切换）。

4

3 回答 3

2

在点击回调函数中，利用this关键字，结合.find()方法的威力。

例子：

$('element').click(function() {
  $(this).find('span').toggleClass('myclass');
});
于 2012-11-16T02:41:36.260 回答
2

您还可以使用 jQuery 链接的强大功能将其写在一行中，就像这样。

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

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

于 2012-11-16T02:49:49.667 回答
1 
$(this).find(' span').toggleClass("ArrowUp", "ArrowDown");
于 2012-11-16T02:43:51.343 回答