Question

我之前问过这个问题，但仍然没有成功。希望现在有人可以帮助我...在小提琴中你会看到一个响应式菜单，当它大于1000px时，它有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");
    });
});

Answer 2

您可能想要像我在这里@ FIDDLE

那样添加新的媒体查询

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

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

2 个答案: