¿Es posible que la función jQuery slideDown () aplique la propiedad display: flex en lugar de display: block?

Solución:

Intente la siguiente devolución de llamada de inicio:

$(".item").slideDown({
  start: function () {
    $(this).css({
      display: "flex"
    })
  }
});

Aquí hay dos formas posibles en las que puede lograr lo que está discutiendo.

Opción 1

Un método para lograr esto es envolver el elemento dentro de un div y dale el envoltorio div una clase con el display: flex propiedad.

por ejemplo (asumiendo que su estructura HTML está en estas líneas según su BEM CSS):

<nav class="nav" class="nav___item"> 
  <div class="nav__item">
    <div style="display: flex">
      <div class="nav__item__account-dropdown--open">
        ...
      </div>
    </div>
  </div>
</nav>

opcion 2

Alternativamente, puede sobrescribir la función con una función de devolución de llamada anónima, así:

$('.nav__item__account-dropdown--open').slideUp(500, function() { 
  $(this).css('display', 'flex');
});

No sé si este es un comportamiento más nuevo, pero en jQuery 3.2 al menos, si el elemento tiene un estilo de visualización en línea: ninguno, jQuery elimina esta propiedad en lugar de agregar una nueva propiedad de visualización en slideUp (), slideToggle (), etc.

Entonces, si configura su elemento para mostrar: flex en el CSS, y luego aplica display: none, ya sea en línea usando una etiqueta de estilo en el elemento, o con algo similar a lo siguiente inmediatamente en la carga de la página:

$('.element').css('display', 'none');

Luego, cuando use slideDown (), etc., se quedará con un elemento visible con la propiedad de visualización correcta.

Si su elemento solo debe estar oculto en un determinado tamaño de pantalla, puede ejecutar el código para ocultar el elemento dentro de una declaración if basada en el ancho de la pantalla, por ejemplo

if( $(window).width() < 600){
    $('.element').css('display', 'none');
}

Esto tiene la desventaja potencial de que el elemento se muestre brevemente hasta que la página termine de cargarse, pero si va a permitir que el elemento se muestre más adelante, no creo que esto sea un gran problema. También puede usar algo como slideUp () para ocultar inicialmente el elemento, por lo que se anima muy bien.

---

---

Utiliza Nuestro Buscador