窗口调整大小时隐藏的响应式导航答案

【问题标题】：Responsive navigation hidden on window resize窗口调整大小时隐藏的响应式导航
【发布时间】：2014-07-26 00:24:37
【问题描述】：

在调整窗口大小时隐藏响应式导航。

大家好

我这里有一个演示

http://www.ttmt.org.uk

这里还有jsfiddle

http://jsfiddle.net/VCPJu/

这是一个简单的水平 li 列表导航，在窗口调整大小时导航隐藏并显示菜单按钮。菜单按钮然后向下滑动现在垂直的导航。

如果我让窗口变小，打开向下滑动菜单并调整窗口大小，导航会返回到水平菜单。

我的问题是，如果我将窗口变小，打开向下滑动菜单然后关闭，然后将窗口大小调整为更大，水平菜单不会再次显示。

    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <title>Title of the document</title>

      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        li{
          list-style:none;
        }
        #menu_btn{
          width:50px;
          height:30px;
          background:red;
          display:none;
          color:white;
          text-align:center;
        }
        #menu_btn:hover{
          cursor:pointer;
        }
        nav{
          margin:50px;
          display:block;
        }
        nav ul{
          display:block;
          overflow:auto;
          background:#eee;
        }
        nav ul li{
          display:inline;
        }
        nav ul li a{
          font-family:helvetica, sans-serif;
          float:left;
          display:block;
          padding:5px;
          background:#aaa;
          text-decoration:none;
          margin:0 5px 0 0;
          color:red;
        }

        @media only screen and (max-width:500px){
          #menu_btn{
            display:block;
          }
          nav ul{
            display:none;
          }
          nav ul li{
            display:block;
          }
          nav ul li a{
            float:none;
            margin:0 0 5px 0;
          }
        }
      </style>

      </head>

    <body>

      <nav>
        <a herf="#" id="menu_btn">Menu</a>
        <ul>
          <li><a href="">One</a></li>
          <li><a href="">Two</a></li>
          <li><a href="">Three</a></li>
          <li><a href="">Four</a></li>

        </ul>  
      </nav>  

      <script>
        $('#menu_btn').click(function(){
          $('nav ul').slideToggle();
        })
      </script>

    </body>

    </html>

【问题讨论】：

标签： menu responsive-design

【解决方案1】：

您将不得不使用一些 javascript 来检测屏幕尺寸并重置 nav ul{display: block;} ...原因是因为当您启动 jquery 时，它会将样式直接应用于您的元素，从而使您的内部 CSS 不想渲染。

EDIT::: 这里使用http://jsfiddle.net/Pkk2h/类可能是一个更简单的解决方案

【讨论】：

【解决方案2】：

这是一个老问题，但是我在寻找与我遇到的相同问题的解决方案时遇到了它，我想添加一个新答案，因为标记为已接受答案的答案不是完全正确。是的，Jquery 将 display 属性直接应用于您的元素，但是您不需要使用 Jquery 再次应用 display 元素，您可以简单地添加一个媒体查询，以确定屏幕大小何时显示您的全屏菜单，然后设置display: block!important; 的菜单元素将覆盖 Jquery 显示集。希望这可以帮助任何未来的读者解决这个问题，如果问题的作者仍然活跃，我想你会接受我的回答。

@media only screen and (max-width: 950px){
    #nav {
        /* Apply your responsive menu for screen sizes smaller than 950px */
    }
}

@media only screen and (min-width: 951px){
    #nav {
        display: block!important;
    }
}

【讨论】：