jquery – 隐藏在窗口上的响应式菜单调整大小

我这里有一个jsfiddle – http://jsfiddle.net/2r3Ap/

这是一个简单的响应式菜单.
调整窗口大小时,水平菜单将移动到垂直菜单并隐藏.
然后红色按钮控制导航菜单上下滚动.
调整窗口大小后,应再次显示水平菜单.

很多这些,我认为它很容易重新创建.

我的问题是：

如果窗口调整较小并且垂直菜单打开并使用按钮关闭,然后窗口变大,导航将保持隐藏状态.

当垂直菜单打开或关闭时,我需要在调整窗口大小时显示水平菜单.

<!DOCTYPE html>
    <html>
      <Meta charset="UTF-8">
      <Meta name="description" content="">
      <Meta name="keywords" content="">
      <Meta name="robots" content="">
      <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;
        }
        header{
          max-width:600px;
          margin:0 auto;
          background:#aaa;
          overflow:auto;
          padding:30px 50px 0 50px;
          border-left:10px solid #fff;
          border-right:10px solid #fff;
        }
        button{
          width:30px;
          height:30px;
          background:red;
          display:none;
          border:none;
        }
        nav{
          margin:10px 0 0 0;
        }
        nav li{
          display:inline;
        }
        nav li a{
          float:left;
          display:inline-block;
          padding:5px;
          background:yellow;
          margin:0 5px 0 0 ;
        }
        nav li a:hover{
          background:#fff;
        }
 
        @media only screen and (max-width:400px){
 
          button{
            display:block;
 
          }
          nav{
            display:none;
          }
          nav li{
            display:block;
          }
          nav li a{
            float:none;
            display:block;
            padding:5px;
            background:yellow;
            margin:0 5px 0 0 ;
          }
 
        }
      </style>
 
      </head>
 
    <body>
 
      <div id="wrap">
 
        <header>
          <button></button>
          <nav>
 
            <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>  
 
        </header>  
 
      </div><!-- #wrap -->
 
      <script>
 
        $(function(){
          $('button').click(function(){
            $('nav').slideToggle();
          })
        })
 
      </script>
 
    </body>
 
    </html>

解决方法

@ jimjimmy1995有最简单的解决方案,但另一种方法是使用jQuery的 .resize()方法：

$(function ()
{
    var $window = $(window),$nav = $('nav'),$button = $('button');
 
    $button.on('click',function ()
    {
        $nav.slideToggle();
    });
 
    $window.on('resize',function ()
    {
        if ($window.width() > 400)
        {
            $nav.show();
        }
    });
});

See working jsFiddle demo

jquery – 隐藏在窗口上的响应式菜单调整大小

解决方法

猜你在找的jQuery相关文章