Question

我有这个：

function searchOpen() {
    $('.nav__item__account').addClass('nav__item__account--open');
    $('.nav__item__account-dropdown').slideDown(250);
    $('.nav__item__account-dropdown').addClass('nav__item__account-dropdown--open');
    $('.nav__item__account-dropdown input').focus();
}

function searchClose() {
    $('.nav__item__account').removeClass('nav__item__account--open');
    $('.nav__item__account-dropdown').slideUp(250); 
}

function searchDropdown() {
    if ($('.nav__item__account-dropdown').is(":visible")) {
        searchClose();
    } else {
        searchOpen();
    }
}

nav__item__account-dropdown--open的CSS是：

.nav__item__account-dropdown--open {
    display: flex !important;
    justify-content: center;
}

虽然此解决方法有效，但在滑动完成之前会移除display: flex，这会导致一些不需要的视觉效果。

slideUp()和slideDown()是否有办法应用display: flex代替display: block？

Answer 1

请尝试以下开始回调：

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

Answer 2

以下两种可能的方式可以实现您的讨论。

选项1

实现此目的的一种方法是将元素包装在div中，并为包装器div提供具有display: flex属性的类。

例如（假设您的HTML结构基于您的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>

选项2

或者你可以使用匿名回调函数覆盖该函数，如下所示：

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

Answer 3

我不知道这是否是一个较新的行为，但至少在jQuery 3.2中，如果元素的内联样式为display：none，则jQuery 删除此属性而不是添加slideUp（），slideToggle（）等

上的新显示属性

因此，如果您将元素设置为在CSS中显示：flex，然后应用display：none使用元素上的样式标记内联，或者在页面加载时使用类似于下面的内容：

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

然后当你使用slideDown（）等时，你将留下一个具有正确显示属性的可见元素。

如果您的元素只应隐藏在某个屏幕大小，您可以运行代码以根据屏幕宽度隐藏if语句中的元素，例如

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

这有一个潜在的缺点，即元素在页面加载完成之前会暂时显示，但是如果您以后允许元素显示，我不会认为这将是一个大问题。你也可以使用像slideUp（）这样的东西来初始隐藏元素，这样就可以很好地激活它。

是否有可能jQuery slideDown（）函数应用display：flex属性而不是display：block？

3 个答案: