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相关文章