У меня есть функция 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"> </div>
У меня есть две проблемы:
-
Когда панель скрыта, и мы нажимаем кнопку div (extraFilterDropDownButton), верхняя левая часть страницы будет мерцать, а затем панель будет анимирована.
-
Когда панель отображается и мы нажимаем кнопку div, панель скроется ( "медленно" ), но кнопка не изменится на правильный класс, даже если мы установим ее в UpdateFilterView script?
Правильный класс будет установлен на кнопке при ее зависании, это задается с помощью следующего кода:
$("#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');
}
});