可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Responsive navigation hidden on window resize.

Hi all

I have a demo here

http://www.ttmt.org.uk

and jsfiddle here

http://jsfiddle.net/VCPJu/

It's a simple horizontal li list navigation, on window resize the navigation hides and a menu button shows. Menu button then slides down the navigation that is now vertical.

If I make the window smaller open the slide down menu and resize the window bigger the navigation returns to the horizontal menu.

My problem is if I make the window smaller open the slide down menu and then close then resize the window larger the horizontal menu doesn't show again.

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

回答1:

You're going to have to use some javascript to detect the screen size and reset nav ul{display: block;} ... the reason why is because when you're firing off your jquery it is applying the style DIRECTLY to your element making your internal CSS not want to render.

EDIT::: here is probably an easier solution by using class http://jsfiddle.net/Pkk2h/

回答2:

This is an old question, however I came across it whilst looking for a solution to the same problem as it was occurring to me, I wanted to add a new answer as the one that was marked as the accepted answer isn't completely true. Yes, the Jquery applies the display property directly to your element, however you do not need to apply the display element again using Jquery, you can simply add a media query for when the screen size is to show your full screen menu and then set the menu element to display: block!important; which will over-write the Jquery display set. Hope this helps out any future readers with this problem, if the author of the question is still active, I assume you would accept my answer.

@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;
    }
}