1

簡単なjQueryトグルコードを作成しました。

$("#expander.closed").click(function(){
    console.log("opening");
    $("#expander").removeClass();
    $("#expander").addClass("open");
});
$("#expander.open").click(function(){
    console.log("closing");
    $("#expander").removeClass();
    $("#expander").addClass("closed");
});

アイデアは#expander、クラスをクリックするたびにとの間openで切り替わるということですclosed。

ただし、何らかの理由で、からに変更されて1回だけ機能しclosed、openその後はそれ以上機能しません。

理由がわかりません。これがjsFiddleです。

4

3 に答える 3

2

.closed最初は、イベントをバインドするとクラスが存在しないので、イベントはバインドされないと思います

イベントを他の基準にバインドするか、を使用する必要があるかもしれませんlive。ただし、これは非推奨です

より良い方法はこのようになります

$("#expander_parent").on('click', '#expander.closed', function(){
    // Do your stuff
})
于 2013-02-15T19:26:02.680 に答える
2

idを使用してバインドし、.toggleClassを使用してクラスを切り替えます。

$("#expander").click(function(){
    $(this).toggleClass('open closed');
});

フィドル

クラスに応じて他の機能を実行する必要がある場合は、次のように確認できます

$("#expander").click(function(){
    var $this = $(this);
    $this.toggleClass('open closed');
    if($this.hasClass('open')){
       // do your open code
    }else{
       // do your close code
    }   
});

フィドル

于 2013-02-15T19:27:11.187 に答える
1

これを実行して、if/else条件内で他の関連操作を追加できます

HTML：

<div id="expander" class="closed">Click Me</div>

CSS：

.closed {
    background-color: red;
}

.open {
    background-color: blue;
}

Javascript：

$("#expander.closed").click(function (){
    if ($('#expander').attr('class') === 'closed') {
          $('#expander').attr('class', 'open');

          // Add other related functions here
    } else {
        $('#expander').attr('class', 'closed');

        // Add other related functions here
    }    
});

http://jsfiddle.net/mCDwy/1/

于 2013-02-15T19:39:49.353 に答える