1

自作のアコーディオンで問題が発生しました。非効率な方法で行われている可能性があります。

http://jsfiddle.net/arzEk/1

html と jQ は jfiddle にあります ^^

最初の問題: 1 つのアイテムをクリックしてからすぐに別のアイテムをクリックすると、アクティブなアイテムだけが青くなるはずなのに、両方が青くなります。

2番目の問題 現時点ではあまり目立ちませんが、ページ上では（おそらくより多くのコンテンツがある場合）、スライドダウンの終わり近くでぎくしゃくし、本来あるべきほど滑らかではありません.

コード：

$(document).ready(function(){                                                                                     
    $(".accordion").click(function () {
        $('.acc-content', this).removeClass("na");
        $('.na').slideUp("medium");    
        $('.acc-title', this).animate({"backgroundColor":"#00bff3"}, 1000);
        $('.acc-title').css("backgroundColor", "#77787B");                                                                         
        $('.acc-content', this).slideToggle("medium");                  
        $('.acc-content', this).addClass("na");                    
    });    
});​

HTML

<div class="accordion">
    <div class="acc-title">Test Title</div>
    <div class="acc-content">Lorem ipsum dolor sit amet</div>
</div>
<div class="accordion">
    <div class="acc-title">Test Title</div>
    <div class="acc-content">Lorem ipsum dolor sit amet</div>
</div>
<div class="accordion">
    <div class="acc-title">Test Title</div>
    <div class="acc-content">Lorem ipsum dolor sit amet</div>
</div>
<div class="accordion">
    <div class="acc-title">Test Title</div>
    <div class="acc-content">Lorem ipsum dolor sit amet</div>
</div>
<div class="accordion">
    <div class="acc-title">Test Title</div>
    <div class="acc-content">Lorem ipsum dolor sit amet</div>
</div>
4

3 に答える 3

1

stop()背景色を元に戻す前に呼び出しを追加します。

$(".accordion").click(function () {
    $('.acc-content', this).removeClass("na");
    $('.na').slideUp("medium");
    $('.acc-title').stop().css("backgroundColor", "#77787B");   // on this line     
    $('.acc-title', this).animate({"backgroundColor":"#00bff3"},1000);
    $('.acc-content', this).slideToggle("medium");
    $('.acc-content', this).addClass("na");           
});

http://jsfiddle.net/arzEk/2/

これにより、実行中のアニメーションがキャンセルされるため、ハイライトされた色へのアニメーションが続行されなくなります。

于 2012-08-22T13:01:41.397 に答える
0

アニメーションは 1 秒間実行されるため、新しいタブを押しても引き続き実行されます。

クリックするたびにアニメーションを停止してみてください。

$('.acc-title').css("backgroundColor", "#77787B");
$('.acc-title').stop(); // Stop the currently-running animation
$('.acc-title', this).animate({"backgroundColor":"#00bff3"}, 1000);
于 2012-08-22T12:49:30.817 に答える
0

はい、進行中のアニメーションを停止するには stop() を使用する必要があります。代わりにアニメーションに CSS3 トランジションを使用する場合、これははるかに単純になり、メンテナンスも容易になります。

http://jsfiddle.net/spuCh/1/

$('.acc-title').click(function() {
    $('.acc-content.na')
        .stop()
        .slideUp()
        .removeClass('na')
            .prev() // The title
                .removeClass('selected');

    $(this)
        .stop()
        .addClass('selected')
        .next() // The content
            .stop()
            .slideDown()
            .addClass('na');
});

「ギザギザ」の部分は… コンテンツが縮んだり伸びたりするスピードが微妙に違うからです。全体を固定の高さの div 内にラップし、オーバーフローを非表示にすることによってのみ解決できます (overflow: hidden; in css)。

于 2012-08-22T13:13:22.683 に答える