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

Solution disappearance responsive navigation after open/close

本文关键字：解决方案 消失 响应 导航 打开      更新时间：2023-09-26

我以前问过这个问题，但仍然没有成功。希望现在有人能帮我。。。在fiddle中，你可以看到一个响应菜单，当它大于1000px时，它有4个水平内联的菜单项。小于1000px的菜单显示一个导航btn（现在是一个红色框！），onclick显示菜单项，但当打开和关闭并调整大小到大于1000px时，其余3个菜单项不会显示。我对媒体查询做了一些测试，但我认为必须在javascript部分找到解决方案。有人能应付这个挑战吗？

这里是FIDDLE

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

问题是fadeToggle将nav > ul设置为style="display: none"。样式集直接覆盖任何样式表，除非您使用！重要的

因此，结合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");
    });
});

您可能需要添加一个新的媒体查询，就像我在这里@FIDDLE 所做的那样

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