1

この矢印トグル スクリプトを自分のページで動作させようとしています。シンプルなものが恋しいと思いますが、それが何であるかわかりません。これを理解するために2時間を費やしてきました。

スクリプト ：

$(document).ready(function(){

    $(".accordion h3:first").addClass("active");
    $(".accordion a:first").addClass("active");
    $(".accordion p:not(:first)").hide();

    $(".accordion h3").click(function() 
    {
        $(this).next("p").slideDown("slow")
               .siblings("p:visible").slideUp("slow");
    });

    $(".accordion a").click(function() 
    {
        $(this).css({background:"url(images/arrowdown.gif) bottom right no-repeat"});
        $(this).siblings("a").removeClass("active");
    });  
});

CSS:

.accordion h3 a {
    padding:20px 0 0 190px; 
    display:block;  
    background:url(images/arrowup.gif) no-repeat bottom right; }

.accordion h3 a:hover { text-decoration:none;   }

.accordion h3 a.active {
    background:url(images/arrowdown.gif) no-repeat bottom right; }

次に私のHTML：

<div class="accordion">
    <h3 id="tab1">
        <a href="#">Title 1</a>
    </h3>
    <p>Description Title 1</p>
    <h3 id="tab2">
        <a href="#">Title 2</a>
    </h3>
    <p>Description Title 2</p>
    <h3 id="tab3">
        <a href="#">Title 3</a>
    </h3>
    <p>Description Title 3</p>
</div>

したがって、上下の矢印は「a href」タグの内側にあり、「tab」ID に応じて H3 タグに異なる背景画像があります。それが理にかなっていることを願っています。

前もって感謝します！！

4

2 に答える 2

2

問題はsiblings、同じ親の下の要素に対して機能することです。a各リンクは でラップされているため、リンクは同じ親の下にはありませんh3。

だから私はこれがあなたが望むものだと信じています

$(document).ready(function(){

    $(".accordion h3:first").addClass("active");
    $(".accordion a:first").addClass("active");
    $(".accordion p:not(:first)").hide();

    $(".accordion h3").click(function() {
        $(this)
            .addClass('active') //set the current as active
            .siblings("h3") //find sibling h3 elements
            .removeClass("active") // and remove the active from them
            .end() // return selection to the current element
            .next("p") // find the next p
            .slideDown("slow") // and show it
            .siblings("p:visible") // find the other visible p elements
            .slideUp("slow"); // and hide them

        $(this)
            .find('a') // find a under current element
            .addClass('active') // and add active class
            .end() // return to current element
            .siblings('h3') // find sibling h3 elements
            .find('a') // find their a elements
            .removeClass('active'); // and remove the active
    });

});

http://jsfiddle.net/gaby/NSvQB/のデモ

于 2011-07-12T23:48:37.943 に答える
2

スクリプトに 2 つのエラーがあります。

  1. 各<a>要素は、要素の唯一の子<h3>です。他に<a>兄弟はいません。あなたが望むのは<a>、アコーディオンのヘッダー内の他のすべての要素を見つけることです:

    $(this).closest('.accordion').find('h3 a').removeClass("active");

  2. 要素 ( $(this).css(...);) にスタイルを設定すると、他のスタイル定義が上書きされます。後でクラスを変更して背景を変更しても (この場合はクラスを削除しますactive) 、何の効果もありません[demo]。したがって、スタイルを直接設定する代わりに、activeクラスを設定する必要があります。

    $(this).addClass('active');

ワーキングデモ

更新:h3すべてをクリックイベントハンドラーに入れ、activeクラスを追加することで、コード全体を簡素化することもできます。

JavaScript:

$(".accordion h3").click(function() {

    $(this).siblings().removeClass("active");
    $(this).addClass('active');

    $(this).next("p").slideDown("slow")
           .siblings("p:visible").slideUp("slow");

});

CSS（変更部分）：

.accordion h3.active a {
    background:red; 
}

デモ 2

于 2011-07-12T23:45:41.283 に答える