響應式菜單問題

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

在窗口調整大小時，您必須檢查窗口大小並顯示導航。