0

1ページに複数のボタンがあります。ボタンをクリックすると、パネルがスライドして表示され、コンテンツが表示されます。ここで動作するデモを設定しました：http： //jsfiddle.net/5ZgMR/1/

ご覧のとおり、かなりうまく機能します。ボタンをクリックするとパネルが表示され、もう一度クリックするとパネルが下にスライドします。問題は、1つのパネルを開いてから2番目のパネルを開くときに発生します。アクティブなクラスが残り、パネルが次のクリックで反応しないという点でバグがあります。デモを試して自分の目で確かめてみるのが一番です。最初のクリックではバグが発生しないため、数回クリックします。

以下に示すように、問題はトグルのコールバック関数にあると思います。誰かがこの問題を修正する方法について何かアイデアがありますか？

$("a.button").toggle(function(){
         idClick = $(this).attr("id");
         newSelector = $("#pane"+idClick);
         varthis = $(this);

         newSelector.animate({ 'bottom' : 99});
         $(".pane").not(newSelector).animate({ 'bottom' : -275});
         $(this).addClass("activeBtn");
         $("a.button").not(varthis).removeClass("activeBtn");

    }, function(){
        newSelector.animate({ 'bottom' : -275});
        $(this).removeClass("activeBtn");
    });​
4

1 に答える 1

0

対応するボタンをクリックするか、別のボタンをクリックすることで特定のペインが非表示になっている可能性があるため、トグルによって混乱が生じると思います。このようなものをもっと試してみてください...

$("a.button").click(function(e){
     idClick = $(this).attr("id");
     var newSelector = $("#pane"+idClick);
     varthis = $(this);

     if ($(this).hasClass("activeBtn")){
         $(this).removeClass("activeBtn");
         newSelector.animate({ 'bottom' : -275});
     }
     else{
         newSelector.animate({ 'bottom' : 99});
         $(".pane").not(newSelector).animate({ 'bottom' : -275});
         $("a.button").removeClass("activeBtn");
         $(this).addClass("activeBtn");
     }
});
于 2012-10-25T19:32:12.723 に答える