响应导航隐藏在窗口大小调整(Responsive navigation hidden on wind

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

大家好

我有一个在这里演示

http://www.ttmt.org.uk

和这里的jsfiddle

http://jsfiddle.net/VCPJu/

这是一个简单的横向力列表导航，在窗口调整导航皮和菜单按钮节目。菜单按钮，然后向下滑动导航，现在是垂直的。

如果我使窗口小开下拉菜单滑动和调整窗口大小越大导航返回到横向菜单。

我的问题是，如果我做的小窗口打开滑盖下拉菜单，然后关闭，然后调整窗口的大小大的横向菜单不会再次显示。

    <!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>

Answer 1:

你将不得不使用一些JavaScript来检测屏幕尺寸和重置nav ul{display: block;} ...的原因是因为当你发射了您的jQuery的是应用样式直接向你的元素让你的内部CSS不想渲染。

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

Answer 2:

这是一个老问题，但是我碰到它，而寻找一个解决方案，因为它发生在我同样的问题，我想添加一个新的答案，这是标记为接受的答案是不完全真实的人。是的，Jquery的直接应用的显示属性设置为你的元素，但是你不需要使用jQuery再次申请显示元件，你可以简单地添加媒体查询时，屏幕大小，显示您的全屏幕菜单，然后设置菜单元素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;
    }
}

文章来源: Responsive navigation hidden on window resize