响应式菜单问题

Question

（首先，如果我的英语有时很糟糕，我会道歉，我是法国人，所以详细解释一切都很难）

我正在个人网站上工作，但我的响应式导航问题出了问题。

我对1024px以下的屏幕尺寸进行了媒体查询。

当我高于1024px时，我的常规导航栏有一个列表。 当我在1024px以下时，我看到了出现的小菜单标识，上面的点击事件使整个菜单显示并消失。

但问题是如果我的菜单关闭并且我将窗口扩展到1024像素以上，则列表不可见，我不知道如何处理该问题。

这是我的代码：

        <nav class="fixed_nav">
        <div id="nav_left">
            <img id="logo_nav" src="img/mini_trombi.png" alt="logo"/>
            <p id="txt_nav">123</p>
        </div>
        <ul class="topnav">
            <div id="show_n_hide_nav" class="responsive_link_bg">
                <li><a id="top_nav_link" class="nav_links" href="#">ITEM 1</a></li>
                <hr class="responsive_separator">
                <li><a class="nav_links" href="#">ITEM 2</a></li>
                <hr class="responsive_separator">
                <li><a class="nav_links" href="#">ITEM 3</a></li>
            </div>
            <li class="icon">
                <a div id="button_nav" class="menu_icon" href="javascript:void(0);">&#9776;</a>
            </li>
        </ul>
    </nav>

Jquery点击：

$(function(){
  $("#button_nav").click(function () {
      if(!$("#show_n_hide_nav").is(":visible")){
          $("#show_n_hide_nav").slideDown("slow");
      } else {
          $("#show_n_hide_nav").slideUp("slow");
      }
  });
});

在我的CSS中，我将原始列表隐藏在1024像素以下，并在用户点击菜单徽标时在jquery的帮助下显示它。

再次，抱歉，如果这很难理解。

Answer 1

解决无效的HTML后，您可以尝试这样做：

问题是来自Jquery的slideUp/Down函数将display属性内联到元素本身，然后当您slideUp并调整浏览器大小时，元素仍然slideUp联样式隐藏：

<li id="show_n_hide_nav" class="responsive_link_bg" style="display: none;">

你可以解决它添加这个mediaquerie强制元素块超过1024 ：

@media (min-width:1025px) {
  #show_n_hide_nav {
    display: block !important;
  }
}

检查这个例子小提琴

Answer 2

您最好切换类并添加css过渡以执行幻灯片效果，如果您高于1024，则忽略show类。

$("#button_nav").click(function () {
   $("#show_n_hide_nav").toggleClass("show");
});

如果你仍然想使用slideDown() / slideUp() ，你必须绑定$(window).resize()事件并检查窗口是否高于/低于1024px。

Answer 3

$(function(){
  $("#button_nav").click(function () {
      if(!$("#show_n_hide_nav").is(":visible")){
          $("#show_n_hide_nav").slideDown("slow");
      } else {
          $("#show_n_hide_nav").slideUp("slow");
      }
  });
});
$(window).resize(function(){
   if($(window).width() > 1024){
      $("#show_n_hide_nav").show();
   }
});

在窗口调整大小时，您必须检查窗口大小并显示导航。