2

スライドトグルを使用して対応するヘッダーをクリックすると、コンテンツがスライドします。今、私はクラスを同時に切り替えたいと思っています。

トグルクラスを使用して、どのヘッダーがクリックされたかに関係なくすべてのクラスを切り替えることができますが、クリックされたヘッダーに対応するクラスのみを切り替えるのに問題があります。

これが私のコードです：

<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

jQueryチェーンの力を利用して、このように1行でこれを記述することもできます。

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

ここで注意すべき2つのことは、（.find()セレクターによってフィルター処理された一致要素の子孫を取得する）と.end()（現在のチェーン内の最新のフィルター処理を終了し、一致した要素のセットを以前の状態に戻す）です。

于 2012-11-16T02:49:49.667 に答える
2

クリック コールバック関数では、thisキーワードを利用し、それをメソッドの機能と組み合わせ.find()ます。

例：

$('element').click(function() {
  $(this).find('span').toggleClass('myclass');
});
于 2012-11-16T02:41:36.260 に答える
1 
$(this).find(' span').toggleClass("ArrowUp", "ArrowDown");
于 2012-11-16T02:43:51.343 に答える