Tengo una función de JavaScript que se ve así:
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"); } } Esto se activará con el siguiente código (desde dentro de $(document).ready(function () {}) :
$('#extraFilterDropDownButton').click(function() { if ($('#F_ShowF').val() == 1) { $('#F_ShowF').val(0); } else { $('#F_ShowF').val(1); } UpdateFilterView(); });El HTML para esto es fácil:
<div id="divCategoryFilter">...</div> <div style="clear:both;"></div> <div id="extraFilterDropDownButton" class="showhideExtra_down"> </div>Tengo dos problemas con esto:
Cuando el panel está oculto y presionamos el botón div ( extraFilterDropDownButton ), la parte superior izquierda de la página parpadeará y luego el panel se animará hacia abajo.
Cuando se muestra el panel y presionamos el botón div, el panel se hide('slow') , pero el botón no cambiará a la clase correcta incluso cuando lo configuremos en el script UpdateFilterView .
La clase correcta se establecerá en el botón cuando se desplace sobre él, esto se establece con el siguiente código:
$("#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'); } });Para configurar una clase por completo, en lugar de agregar una o eliminar una, use esto:
$(this).attr("class","newclass");La ventaja de esto es que eliminará cualquier clase que pueda estar configurada allí y la restablecerá a su gusto. Al menos esto funcionó para mí en una situación.
Usa jQuery
$(this).addClass('showhideExtra_up_hover');y
$(this).addClass('showhideExtra_down_hover');<script> $(document).ready(function(){ $('button').attr('class','btn btn-primary'); }); </script>