jQuery if 语句更改 CSS答案

【问题标题】：jQuery if statement to change CSSjQuery if 语句更改 CSS
【发布时间】：2013-06-20 13:17:55
【问题描述】：

此代码是关于按下使文本切换（显示/隐藏）的按钮：

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"});        
       }    
});

除了显示，一切正常：无，有人知道为什么/如何解决这个问题吗？

【问题讨论】：

没有else。 jQuery 还有一个.toggle() 方法。
'Button']' 不是有效的选择器。检查您的 JavaScript 控制台是否有错误。

标签： jquery css button click toggle

【解决方案1】：

测试元素是否可见：

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

【讨论】：

@PimPeters：嗯，这个问题没有描述“不起作用”是什么意思。添加一点细节也会有所帮助。

【解决方案2】：

一些改进：

使用.is(':visible') 检查元素是否可见
将 if 语句移到 slideToggle() 的 callback 函数内
将两个 css 调用合并为一个调用
您在第一行有错字 - '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"});
    }
  });
});

【讨论】：

错字是因为这个问题改了一些名字。无论如何，这成功了！多方面的感谢。
当然，没问题。如果它是最佳答案，请将其标记为解决方案：D

【解决方案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"}
                 );
});

【讨论】：