如何使用jQuery更改元素的类>

问：

我有一个 JavaScript 函数，如下所示：

function UpdateFilterView() {
  if (_extraFilterExists) {
    if ($('#F_ShowF').val() == 1) {
      $('#extraFilterDropDownButton').attr('class', "showhideExtra_up");
      $('#extraFilterDropDownButton').css("display", "block");
      if ($('#divCategoryFilter').css("display") == 'none') {
        $('#divCategoryFilter').show('slow');
      }
      return;
    } else {
      if ($('#divCategoryFilter').css("display") == 'block') {
        $('#divCategoryFilter').hide('slow');
      }

      $('#extraFilterDropDownButton').css("display", "block");
      $('#extraFilterDropDownButton').attr('class', "showhideExtra_down");
      return;
    }
  } else {
    if ($('#divCategoryFilter').css("display") != 'none') {
      $('#divCategoryFilter').hide('fast');
    }
    $('#extraFilterDropDownButton').css("display", "none");
  }
}

这将由以下代码触发（从 ：$(document).ready(function () {})

$('#extraFilterDropDownButton').click(function() {
    if ($('#F_ShowF').val() == 1) {
        $('#F_ShowF').val(0);
    } else {
        $('#F_ShowF').val(1);
    }

    UpdateFilterView();
});

这个 HTML 很简单：

<div id="divCategoryFilter">...</div> 
<div style="clear:both;"></div>
<div id="extraFilterDropDownButton" class="showhideExtra_down">&nbsp;</div>

我有两个问题：

1. 当面板被隐藏并按下 div 按钮 （） 时，页面的左上角将闪烁，然后面板将向下动画化。extraFilterDropDownButton

2. 当面板显示时，我们按下 div 按钮，面板将 ，但即使我们在脚本中设置它，该按钮也不会更改为正确的类？hide('slow')UpdateFilterView

将鼠标悬停时，将在按钮上设置正确的类，这是使用以下代码设置的：

$("#extraFilterDropDownButton").hover(function() {
    if ($('#divCategoryFilter').css("display") == 'block') {
      $(this).attr('class', 'showhideExtra_up_hover');
    } else {
      $(this).attr('class', 'showhideExtra_down_hover');
    }
  },
  function() {
    if ($('#divCategoryFilter').css("display") == 'block') {
      $(this).attr('class', 'showhideExtra_up');
    } else {
      $(this).attr('class', 'showhideExtra_down');
    }
  });