jquery - CSSを変更するjQueryのif文

Question

このコードは、テキストを切り替える (表示/非表示) ボタンを押すことに関するものです。

jQuery('Button']').click(function () {
    jQuery('#text').slideToggle('fast', function () {});      
    if (jQuery('#text').css('display') == 'block') {
        jQuery('#dropdown1arrow').css({"border-top":"0px"});
        jQuery('#dropdown1arrow').css({"border-bottom":"7px solid #0767B1"});            
       }
    if (jQuery('#text').css('display') == 'none') {
        jQuery('#dropdown1arrow').css({"border-bottom":"0px"});
        jQuery('#dropdown1arrow').css({"border-top":"7px solid #0767B1"});        
       }    
});

ディスプレイ以外はすべて機能します: なし、これを修正する理由/方法を知っている人はいますか?

Answer 1

代わりに、要素が表示されているかどうかをテストします。

if (jQuery('#text').is(":visible")) {
    // something
}
else {
    // something else
}

Answer 2

いくつかの改善:

• .is(':visible')要素が表示されているかどうかを確認するために使用します
• callbackの関数内に if ステートメントを移動します。slideToggle()
• 2 つの CSS 呼び出しを 1 つの呼び出しにマージする
• 最初の行にタイプミスがあります - 'Button']'

コード：

jQuery('Button').click(function () {
  jQuery('#text').slideToggle('fast', function () {
    text_obj = $(this)
    if (text_obj.is(':visible')) {
      jQuery('#dropdown1arrow').css({"border-top":"0px", "border-bottom":"7px solid #0767B1"});
    }
    else {
      jQuery('#dropdown1arrow').css({"border-bottom":"0px", "border-top":"7px solid #0767B1"});
    }
  });
});

Answer 3

これを試すことができます：

jQuery('button').click(function () {
    jQuery('#dropdown1arrow').css(jQuery('#text').is(":visible") ? 
                  {"border-top":"0px", "border-bottom":"7px solid #0767B1"} :
                  {"border-bottom":"0px", "border-top":"7px solid #0767B1"}
                 );
});