jquery - slideDown 不适用于带有 flex 显示的响应式切换

Question

所以这是我的 JSFiddle 来设置问题空间 https://jsfiddle.net/67nx5paw/11/

首先，我有一个导航栏，它折叠起来使用切换图标来显示菜单。我尝试使用 slideDown 和 slideToggle 函数，但是它们什么也没做。我正在使用的 jQuery 如下(我什至使用 console.log 来检查它是否正在被调用。

$(function() {
    $('#toggle').on('click', function(e) {
        console.log('Clicked');
        $('#content').slideToggle();
        e.preventDefault();
    });
});

如 fiddle 链接所示，我在导航元素上使用 display: flex，然后调用 display: none 将它们隐藏在各自的 View 中。切换是否因为 flex 显示值而不起作用？

Answer 1

我检查了你的 fiddle ，在你的 css 中，有一个带有 !important 的 css 规则。

nav.nav .nav-content {
    display: none !important;
}

删除 !important，它将起作用。

Demo

更新:

如果您使用 !important，它将覆盖由 javascript 设置的内联 style。通常，使用 slideDown() 时，jQuery 添加一个内联样式，它将设置您要 slideDown() 阻止的元素的显示属性。因此，对于 !important，浏览器会看到 css 规则具有高优先级。