JQueryクリック関数removeClass addClass sequential

Question

ボタンをクリックしたい場合は、同じボタンをクリックするとdivが表示され、消えるはずです。

実際に表示されるのは作品だけですが、もう一度それを隠す方法は？

Skript：

$('#button').click(function() { 
    $('#ui-block-a').removeClass('visuallyhidden').addClass('ui-block-a'), function(){ 
    $('#ui-block-a').addClass('visuallyhidden').removeClass('ui-block-a'); 
    }; 
}); 

HTML：

<div class="visuallyhidden" id="ui-block-a"> 
    <ul data-role="listview" data-filter="true" id="nav"></ul> 
</div> 

ここでは、コールバックを使用しようとするが、クラスが正しくから設定されている場合、それは...

Answer 1

が動作していませんまず、.toggleClass()^[docs]を使用できます。

$('#ui-block-a').toggleClass('visuallyhidden ui-block-a'); 

それ以外の場合は

、明示的あなたが.toggle()を使用することができ、クラスを削除/追加したい場合：

$('#button').toggle(function() { 
    $('#ui-block-a').removeClass('visuallyhidden').addClass('ui-block-a'); 

}, function(){ 
    $('#ui-block-a').addClass('visuallyhidden').removeClass('ui-block-a'); 
}); 

---

あなたのコードが動作しない理由：

あなたはない設定されていますコールバックをアップする。 カンマ演算子で2つのステートメントを実行しています。最初の部分（$('#ui-block-a').addClass('...').removeClass('...')）は期待通りに実行されます。 2番目の部分（function() {...}）は、の関数式と評価され、結果が関数の全体的な結果として返されます。しかし、あなたは何かに結果を割り当てるわけではないので、それはただ静かに無視されます。

など。あなたは

// form is like `var foo = x, y;` 
var foo = $('#ui-block-a').removeClass('...').addClass('...'), function(){ 
    $('#ui-block-a').addClass('...').removeClass(...'); 
}; 

を行いたい場合は、その後fooは機能

function() { 
    $('#ui-block-a').addClass('...').removeClass('...'); 
} 

を参照してくださいだろうが、それはあなたがとにかく欲しいものではありません。関数を置くことは合法ですが、特別な意味を持たず、従って効果はありません。

Answer 2

toggleClassを使用してください。時にはtoggleClassは少し気になる可能性があります。したがって、if文と変数を使用してください。 sudoのコードで

：

variable = 0 

if variable = 0 
{ 
    Show Div 
    variable = 1 
} 
else if variable = 1 
{ 
    Hide Div 
    variable = 0 
}