jquery - jQuery if 语句更改 CSS

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')检查元素是否可见
• 将 if 语句移到callback函数内部slideToggle()
• 将两个 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"});
    }
  });
});

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