0

私は単純なアコーディオン型のリストを適用しました。リストはロード時にすべて開かれます。問題は、最初にタブをクリックしたときに、画像が開くアイコンから閉じるアイコンに変わることです。これは問題ありません。しかし、同じタブをもう一度クリックすると、コンテンツが下にスライドしますが、画像は cclose から open に変わりません。

画像クラスは次のとおりです。

.close_accordianimage{ background:url(../img/close.png) left 9px no-repeat;}
.open_accordianimage{ background:url(../img/open.png) left 9px no-repeat;}

私が使用したスクリプトは次のとおりです。

//for opening and closing content on click of h3, and also adding of close image on click 
<script>
$(document).ready(function() {
    $("#odd-accordion h3").click(function() {
        $(this).next('div').toggle('300');
        $(this).addClass('close_accordianimage');
    });
});



</script>



<script>
$(document).ready(function(){
    $('#odd-accordion h3').addClass('open_accordianimage');
});

HTML コードのサンプルは次のとおりです。

<div id="odd-accordion">
    <h3 class="filtertitle">Seater :</h3>

    <div>
        <div class="filterfield">
            <input type="checkbox" />Seater</div>
        <div class="filterfield">
            <input type="checkbox" />Sleeper</div>
    </div>
     <h3 class="filtertitle">A/C :</h3>

    <div>
        <div class="filterfield">
            <input type="checkbox" />A/C</div>
        <div class="filterfield">
            <input type="checkbox" />Non-A/C</div>
    </div>
     <h3 class="filtertitle">Bus Brand :</h3>

    <div>
        <div class="filterfield">
            <input type="checkbox" />Volvo/Mercedes</div>
        <div class="filterfield">
            <input type="checkbox" />Non-Volvo/Mercedes</div>
    </div>
     <h3 class="filtertitle">Timing :</h3>

    <div>
        <div class="filterfield">
            <input type="checkbox" />Early Morning
            <br /> <span class="timing">(5:00 AM - 9:00 AM)</span>

        </div>
        <div class="filterfield">
            <input type="checkbox" />Morning/Afternoon
            <br /> <span class="timing">(9:00 AM - 5:00 PM)</span>

        </div>
        <div class="filterfield">
            <input type="checkbox" />Evening
            <br /> <span class="timing">(5:00 PM - 9:00 PM)</span>

        </div>
        <div class="filterfield">
            <input type="checkbox" />Night
            <br /> <span class="timing">(9:00 PM - 5:00 AM) </span>

        </div>
    </div>
     <h3 class="filtertitle">Fare :</h3>

    <div>Jquery filer</div>
</div>

open クラスと cose クラス (それぞれの画像を持っている) もコンテンツと切り替えたいだけです。助けてください

4

2 に答える 2

0

あなたも追加するのを忘れていたと思いますremoveClass()。これで、クラスを積み重ね続けるだけです。要素を数回クリックした後、要素を検査するために Firebug などを使用しましたか?close_accordianimage重複のリストがあるに違いありません。

何が起こるかを説明すると、 から始めてopen_accordianimageが close_accordianimageduplicates追加され、削除されることはありません。適切に行うには、 を削除しopen_accordianimage、 を追加し close_accordianimageduplicates、逆も同様です。

于 2013-08-08T10:28:06.660 に答える