javascript - 打开/关闭后解决方案消失响应式导航

Question

我之前问过这个问题，但还是没有成功。希望现在有人可以帮助我......在 fiddle 中，你看到一个响应式菜单，当它大于 1000 像素时，它有 4 个水平内联的菜单项。小于 1000px 的菜单显示一个 nav-btn(现在是一个红色框!)，onclick 显示菜单项，但是当打开和关闭以及调整大小大于 1000px 时，其余 3 个菜单项不会显示。我用媒体查询做了一些测试，但我认为解决方案必须在 javascript 部分找到。任何人都可以应对这个挑战吗？

这里是 FIDDLE

$(function() {
$('.nav-btn').click(function(event) {
$('nav ul').fadeToggle(300);
});
});

Answer 1

好吧，问题在于您的 fadeToggle 将 nav > ul 设置为 style="display: none"。样式集直接覆盖任何样式表，除非您使用 !important。

因此，结合 NMindz 的回答，试试这个:

@media all and (min-width: 1000px) {
  nav ul { 
    display: block !important;
    top: 60px;
  }
}

您也可以尝试可能更好的纯 css 解决方案。有点像

nav ul.show {
    display: block;
}

对于 javascript

$(function() {
    $('.nav-btn').click(function(event) {
        $('nav ul').toggleClass("show");
    });
});