Question

我正在尝试使用.slideToggle()将具有display: none的div切换为display: grid。但是，此动画似乎在HTML中添加了display: block内联并覆盖了其他任何CSS类

CSS

.grid {
    display: grid;
}

jQuery

$('#nav-toggle').click(function() {
    $('.nav-menu').slideToggle(500, function() {
        $(this).toggleClass('grid')
    });
});

使用

取得了短暂的成功

$('#nav-toggle').click(function() {
    $('.nav-menu').slideToggle(500, function() {
         if ($(this).is(':visible')) {
             $(this).css('display','grid');
         }
    });
});

.nav-menu {
    display: none;
    grid-template-columns: repeat(3, 1fr);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=nav-toggle>
    Toggle
</div>

<div class=nav-menu>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

，但是初始动画似乎使用display: block播放，并且动画完成后，我猜想jQuery然后将元素视为可见，并且HTML捕捉从display: block（项目堆叠）到{{1} }（以空格隔开）。

以下所有动画似乎在display: grid上都能很好地播放。

如何使初始动画也正确显示？

Answer 1

解决方案是将nav-menu设置为display:grid;，并使用JQuery隐藏和显示它。顺便说一下，如果您有一个禁用JavaScript的用户，那么他仍然可以阅读您的页面。

尝试以下代码：

$('.nav-menu').hide(); // clearer than display none
$('#nav-toggle').click(function() {
  $('.nav-menu').slideToggle(500, function() {
    if ($(this).is(':visible')) {
      $(this).show(); // clearer than display previous (here grid)
    }
  });
});

.nav-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav-toggle">
  Toggle
</div>

<div class="nav-menu">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

有关：https://stackoverflow.com/a/8144998/1248177

Answer 2

因此，为了使响应式CSS媒体查询更加简洁明了，我最终将nav元素包装在div中，并简单地使div在display: none和display: block之间切换。

由于该块的子级是保留网格属性的nav，所以我仍然可以在其中对齐菜单项。同样，在我的情况下，该块是更复杂的display: grid布局的子元素，但是由于它仍然是子元素，因此我仍然可以在其上使用CSS网格属性，我只需要使用较旧的CSS方法来扩展和将块居中。

它还不是很干净，但是我猜想它是我能做的最好的事情，直到更新jQuery以支持其动画不仅限于display: block。

$('#nav-toggle').click(function() {
    $('.nav-menu-container').slideToggle(500, function() {
        if ($(this).css('display') == 'none') {
            $(this).css('display', '');
        }
    });
});

.nav-menu-container {
    display: none;
}

.nav-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=nav-toggle>
    Toggle
</div>
<div class=nav-menu-container>
    <div class=nav-menu>
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
</div>

使用不带显示的jQuery动画：块

2 个答案: