0

jQuery UI を使用して作成したアコーディオンがあります。セクションが開いているか閉じているかに応じて、上または下を指すシェブロン アイコンが必要です。問題は私のjQueryです。少なくとも最初はそうです。ロード時に両方のシェブロンが表示されますが、シェブロンをクリックしてもまったく変化しません。

Jクエリ

$(function() {

     $(".section a").click(function() {

          $(".chevron").removeClass("chevron").addClass("up");
    });
});

CSS

.chevron {
background: url("images/down.png") no-repeat;
}

.up {
background: url("images/up.png");
}

HTML

 <div class="section">
   <a href="#"><div class="tab active">
   <span class="chevron"></span><h3>Section 1</h3>
   </div></a> <!-- tab -->
4

1 に答える 1

2

これを参照して、クリックしている要素を切り替える必要があります (一度にすべてではありません)。を取得したら、 .find$(this)を使用してリンク内のシェブロンを検索できます。

最後に、toggleClassを使用してクラスの状態を切り替えることができます。これにより、リンクを繰り返しクリックして、クラスの状態を切り替えることができます。

$(function() {
    //Add down to all .chevrons
    $(".section a .chevron").addClass('down'); 

    //Toggle up/down classes
    $(".section a").click(function() {
        var $chevron = $(this).find('.chevron');                
        $chevron.toggleClass("down up");
    });
});

次に、CSS の場合、クラスを正しいシェブロン イメージに設定します。

.chevron.up { background-image('images/up.png'); }
.chevron.down { background-image('images/down.png'); }
于 2013-09-24T15:50:16.183 に答える