0

私はh2タグのスタイルを設定し、jQueryを使用してそれを一種のボタンに変えました。クリックすると、非表示のコンテンツがこのボタンの下から下にスライドします。私の問題は効果のシーケンスです、私はそれらを正しくタイミングをとることができません。

これが私がそれをどのように見せたいかです：

  1. ボタンの角は丸みを帯びています。クリックすると、下部の丸い角が削除されるため、非表示のコンテンツがボタンの下部からスライドしているように見えます。

  2. ボタンをもう一度クリックすると、コンテンツがボタンにスライドします。コンテンツが上にスライドし終わると、ボタンはすべての丸い角の表示を再開します。

私のjfiddleモックアップには、2つのサンプルボタンがあります。例1は最初のクリックで機能しますが、もう一度クリックするとコンテンツがスライドして戻る前にボタンが丸くなります。

例2をクリックすると、コンテンツがスライドアウトするときにボタンが丸くなります。ただし、コンテンツを非表示にするためにもう一度クリックすると、シーケンスは正しい順序で機能します。

要点は次のとおりです。

$('.section').hide();


$('.example1').click( function(event) {
    event.preventDefault(); 

    $(this).next().slideToggle('slow')
    .prev().toggleClass('open-header');    
});


$('.example2').click( function(event) {
    event.preventDefault();

    $(this).next()
        .slideToggle('slow')
        .queue( function(next) {
            $(this).prev().toggleClass('open-header');
            $(this).dequeue();
        }); 
});

各ボタンの動作部分を組み合わせたいのですが、どうすればいいのかわかりません。.queue（）またはコールバックの使用に関する他の投稿を読みましたが、それを機能させることができないため、自分が何をしているのかわからないはずです。助言がありますか？

4

2 に答える 2

0

トグルを使用する代わりに、.open-headerクラスが手動であるかどうかを確認し、上にスライドするときに、コールバックでクラスを削除します。

$('.example1').click( function(event) {
    event.preventDefault(); 
    if(!$(this).hasClass('open-header')) {
      $(this).addClass('open-header');
        $(this).next().slideDown('slow');
    } else {
        $(this).next().slideUp('slow',function() {
           $(this).siblings('h2').removeClass('open-header');
        });

    }
});

更新されたフィドル：http：//jsfiddle.net/WsE8R/5/

于 2013-03-04T22:50:12.647 に答える
0

open-header関数内のクラスの存在を検出し、操作の順序を変更する必要がある可能性があります。クラスは、開いたときに最初に切り替え、閉じるときに最後に切り替える必要があります。

だからこのようなもの：

$('.example1').click( function(event) {
    event.preventDefault();

    if($(this).hasClass('open-header')) {
        // we need to close it
        $(this).next().slideToggle('slow').prev().toggleClass('open_header');
    } else {
        // we need to open it
        $(this).toggleClass('open_header').next().slideToggle('slow');
    }   
});
于 2013-03-04T22:52:34.640 に答える