Question

我这里有一个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>

Answer 1

问题是，当屏幕足够大时，它不知道它应该显示导航栏。只需将display: block添加到媒体查询之外的nav样式。

nav{
    margin:10px 0 0 0;
    display: block;
}

jsFiddle

作为一项规则：您在媒体查询中定义的任何内容都应该具有“默认”值。

Answer 2

@ 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 的

Answer 3

另一种可能资源较少的方法是在slideToggle方法上使用回调函数。回调函数会说，“当动画结束时，删除内联display属性并向元素添加一个类。”

对slideToggle的新调用如下所示：

$(function(){
  $('button').click(function(){
    $('nav').slideToggle(400, function(){
      $('nav').toggleClass('mobile-down').css('display', '');
    });
  });
});

CSS：

.mobile-down {
  display: block;   
}

这是modified fiddle。

为了进一步说明，我在找到之前刚刚完成self-answered question。

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

3 个答案:

jsFiddle