2

シンプルなトグル+EXPAND/-COLLAPSEトグル スイッチを作成しようとしています。

開始時:

HTML:

<div class="ttoggle">
  <div class="expand">+ EXPAND</div>
  <div class="collapse hide">- COLLAPSE</div>
</div>

CSS:

.hide { display:none;}

JQuery:

    var x="collapse";
 $('.ttoggle').click(function() {
    if(x=="collapse") {
     $(this).find('.'+x).removeClass("hide");
     $(this).find('.expand').addClass("hide");
        x="expand";

    } else if(x=="expand") {
        $(this).find('.'+x).removeClass("hide");
        $(this).find('.collapse').addClass("hide");
        x="collapse";
    }

});

これは、トグルコードを書くにはひどい方法だと思います。変数を使用して状態を登録すると重く見えます...これを機能させるためのより良い/より軽い方法があるはずです....ヒントはありますか?? ありがとう！

4

2 に答える 2

2

私の理解が正しければ、最初に toggle をクリックして +EXPAND を表示し、次にクリックすると -COLLAPSE が表示されるはずです。もう一度クリックすると、再び +EXPAND が表示されます。

このようなものは機能しますか？

$('.ttoggle').click(function() {
    $(this).find('.expand, .collapse').toggleClass('hide');
}
于 2013-06-10T00:10:27.407 に答える
0

ここでインスピレーションを得るために、いくつかのライブラリ コードを参照することをお勧めします。多くの UI ライブラリにはトグル コンポーネントがあります。値を保存するのに最適な場所は、フロント エンドの残りの部分によって異なります。たとえば、Backbone フレームワークを使用している場合、おそらく Backbone.View にトグル状態を保存する必要があります。または、これをフォームで送信する場合は、トグル状態を非表示の入力に保存します。Bootstrap のボタンはよく考えられており、トグルボタンがあります: http://twitter.github.io/bootstrap/components.html#buttonGroups

1 回限りのケースとして、次のように data 属性または非表示の入力をお勧めします。

HTML

<div id="MyToggle" data-isCollapsed="true">Expand</div>

JS

$('#MyToggle').click(function(){
  $(this).data('isCollapsed') = ! $(this).data('isCollapsed')
})
于 2013-06-10T00:14:32.407 に答える