javascript - 响应式菜单问题

Question

(首先，如果我的英语有时不好，我想道歉，我是法国人，所以很难详细解释一切)

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

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

当我超过 1024px 时，我会使用列表制作我的常规导航栏。当我低于 1024px 时，我得到了出现的小菜单 Logo ，点击它的事件使整个菜单出现和消失。

但问题是，如果我的菜单关闭并且我将窗口扩展到 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 像素以下，并在用户单击菜单 Logo 时借助 jquery 显示它。

再次抱歉，如果难以理解。

Answer 1

解决了无效的 HTML 之后，你可以试试这个:

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

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

您可以通过添加此媒体查询来解决它，以强制元素在 1024 上被阻止:

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

Check this example Fiddle