响应式菜单问题

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显示它。

再次抱歉如果理解起来有困难。

- mnX_87

---

除此之外，您的HTML无效，ul元素只允许直接子项为li。 - DaniP

包括您的 CSS 也许是个好主意；-) - empiric

糟糕，没有注意到！谢谢DaniP！ - mnX_87

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

- DaniP

---

太好了！非常感谢你！ :) - mnX_87

很高兴能帮助你 @mnX_87 - DaniP

Answer 2

$(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();
   }
});

在窗口大小调整时，您需要检查窗口大小并显示导航栏。

- Ashish Mehta

Answer 3

你最好使用切换类和添加CSS过渡来实现滑动效果，如果屏幕宽度大于1024像素，只需忽略show类。

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

如果您仍想使用slideDown（） / slideUp（），则必须绑定 $（window）.resize（）事件并检查窗口是否在1024像素以上/以下。

- Martin Hučko

---

谢谢，我会尝试的！ :) - mnX_87