я есть функция 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>

У меня есть две проблемы с этим:

Когда панель скрыта и мы нажимаем кнопку div (extraFilterDropDownButton), верхняя левая часть страницы будет мерцать, а затем панель будет анимирована вниз.

Когда панель отображается и мы нажимаем кнопку div, панель будет скрыта («медленно»), но кнопка не изменится на правильный класс, даже если мы установим его в сценарии 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');
    }
});