1

3 つのボタンのいずれかでトリガーされる、複数のパネルを持つプロジェクトを構築しています。ボタンをクリックすると、パネルがスライドアウトし、既存のパネルがスライドして離れます。最初はトグルを使用していましたが、すべてのトグルを相互に連携させる必要があったため、イベントをクリックに変更しました。

すべてうまくいっていますが、パネルを閉じる際に問題が発生しました。ここで jsfiddle のデモを見ることができます: http://jsfiddle.net/3W4uG/1/

ご覧のとおり、パネルはうまく開きます。ただし、もう一度ボタンを押して閉じることはできません。

私のJQueryは次のようになります。

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

        //close panes and remove active classes
        $(".pane").removeClass("panelUp");
        $("a.button").removeClass("activeBtn");

        //make active
        $(this).addClass("activeBtn");
        newSelector.addClass("panelUp");

        e.preventDefault();
});​

条件文を実装することを考えていたので、次のようにトグルをエミュレートします。

var thisBtn = $(this);

if(thisBtn.hasClass("activeBtn")){
    $(this).removeClass("activeBtn");   //remove active state
    newSelector.removeClass("panelUp"); //remove panel with css3
}

else{
    $(".pane").removeClass("panelUp"); //closes down any other pane
    $("a.button").removeClass("activeBtn"); //removes all other active classes
    $(this).addClass("activeBtn");  //add active class to button just clicked
    newSelector.addClass("panelUp"); //slides up new pane with css3
}

これはうまくいきませんでした。実際、すべてのパネルが一緒に機能しなくなりました。トグルに切り替えずにこれを機能させるにはどうすればよいですか?

4

2 に答える 2

1

http://jsfiddle.net/3W4uG/5/

$("a.button").on("click", function(e){

    var idClick = $(this).attr("id");
    var newSelector = $("#pane"+idClick);
    var isCurrentPane=    $(this).hasClass("activeBtn"); 

        $(".pane").removeClass("panelUp");
        $(".button").removeClass("activeBtn");

    if(!isCurrentPane)
    {
        $(this).addClass("activeBtn");
        newSelector.addClass("panelUp");
    }           
    e.preventDefault();      
});​
于 2012-10-26T14:21:15.193 に答える
0

考えられる解決策の 1 つは、現在のパネルの元の状態を記憶し (以下を参照wasActive)、パネルが最初に開いていた場合は再度開かないことです。

$("a.button").on("click", function(e) {

    idClick = $(this).attr("id");
    newSelector = $("#pane" + idClick);

    var wasActive = newSelector.hasClass('panelUp');  // newly added

    //close panes and remove active classes
    $(".pane").removeClass("panelUp");
    $("a.button").removeClass("activeBtn");

    if (!wasActive) {                                 // newly added

        //make active
        $(this).addClass("activeBtn");
        newSelector.addClass("panelUp");
    }

    e.preventDefault();

});​

フィドルを更新しました。

于 2012-10-26T14:09:22.447 に答える