jsfiddle demo

Question

我正在使用切换效果创建一个简单的响应式导航。但是，如果已切换导航，则现在将显示屏幕重新调整大小大于指定值的时间。

if($(window).width() <= 768 ){

$('.mobile-nav-button').on("tap", function(){

    $('nav ul').toggle() ;

});
 }

Answer 1

在创建可折叠的响应式菜单时，您需要考虑几件事情。

辅助功能。您希望确保隐藏导航后仍可供屏幕阅读器访问。
高效调整大小处理程序。在大多数浏览器中，resize事件在调整大小期间连续调用，而不是在调整大小结束时调用。

在调整大小时重置菜单可见性。您需要确保如果菜单已折叠，则屏幕会在隐藏切换点的断点上方调整大小，导航将以编程方式显示。< / LI>

jsfiddle demo

＆＃13;

var resizeTimer;
$(window).on('resize', function (e) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function () {
        if ($(window).width() > 768) {
            $('.nav-menu').show();
        } else {
            $('.nav-menu').hide();
        }
    }, 250);
});



$('.mobile-nav-button').on('click', function () {
    $('.nav-menu').toggle();
});

＆＃13;

body {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    margin:0;
}
nav {
    background-color: #ccc;
    position: relative;
    min-height: 3em;
}
.mobile-nav-button {
    width: 30px;
    float:right;
    margin: 10px;
    cursor: pointer;
    background: transparent;
    outline: none;
    border: none;
}
.nav-toggle, .nav-toggle:after, .nav-toggle:before {
    content:'';
    width: 2em;
    border-bottom: 3px solid black;
    margin: 5px 0;
    display: block;
}
.nav-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.nav-menu {
    width: 100%;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    position: absolute;
    top: 2em;
    background-color: #eee;
}
.nav-menu>li {
    position: relative;
    display: block;
}
.nav-menu>li>a {
    color: #555;
    line-height: 20px;
    position: relative;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}
@media (min-width: 768px) {
    .mobile-nav-button {
        display:none;
    }
    .nav-menu {
        float: left;
        margin: 0;
        position: relative;
        top: 0;
        background-color: transparent;
    }
    .nav-menu>li {
        float: left;
    }
    .nav-menu>li>a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
    <button class="mobile-nav-button">
        <span class="nav-toggle-label">Toggle site navigation</span>
        <span class="nav-toggle"></span>
    </button>
    <ul class="nav-menu">
        <li>
            <a href="index.html">home</a>
        </li>
        <li>
            <a href="about.html">about</a>
        </li>
        <li>
            <a href="gallery.html">gallery</a>
        </li>
        <li>
            <a href="menu.html">menu</a>
        </li>
        <li>
            <a href="http://bunsandbuns.com/press/">press</a>
        </li>
        <li>
            <a href="hours_&_location.html">hours &amp; location</a>
        </li>
        <li>
            <a href="contact.html">contact</a>
        </li>
    </ul>
</nav>

＆＃13;

对于可访问性，您的标记和CSS有一些关键改进：

将切换元素设为<button> 或添加role="button"和对{div}元素tabindex="0"。如果使用按钮元素，你就可以了需要添加一些css来删除默认样式。了解更多使用咏叹调角色，请参阅：Using the button role。
将切换按钮包裹在<nav>标签内，因为它是导航的一部分。
添加一个描述切换按钮功能的听觉地标。这有很多css技术。我已将<span class="nav-toggle-label">Toggle site navigation</span>添加到您的帐户中标记。 nav-toggle-label类可以隐藏文本，但是屏幕阅读器仍会看到并大声朗读。

点击处理程序（将在移动设备上注册为点击事件）非常简单。您不需要在此处理程序中检查视口大小，因为媒体查询仅显示小于768px的屏幕上的切换按钮。

但是，您确实需要处理调整大小，以确保在菜单处于折叠状态时屏幕大于768px时重置菜单的可见性。为此，您可以使用计时器确保在调整大小完成后仅调用窗口宽度的检查。有更好的去抖技术，但定时器方法有效，易于阅读和简洁。大多数人都没有经常调整窗口大小，所以在我看来，它不值得花费大量的额外代码。

最后，这是重要，请不要忘记您需要在页面<head>中加入视口元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

如果您不包含视口标记，则几乎所有mobile browsers define their default css viewport width as 980px都不会在大多数移动设备上调用显示和隐藏切换的媒体查询。

Answer 2

好吧我假设你想在窗口小于768时隐藏导航......

这是适用于我的代码。将其粘贴到html文件中。在浏览器中启动它。当您调整窗口大小时，Nav会适应。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>
    $(document).ready(function(){

      //function to show if window > 768 and hide if less
      var displayNav = function(){
        var width= $(window).width();
        if(width<768){
          $(".nav").hide(500);
        }else{
          console.log($('.nav'));
          $(".nav").show(500);
        };
      }


      //Set initial state
      displayNav();
      //subscribe to resize event
      $(window).on('resize',function(evt){

        //set navigation state on every resize new
        displayNav();
      });
    });

  </script>
  <style type="text/css">
    .nav{
      border:1px solid red;
      width:100px;
      height:100px;
      background-color:red;
      text-align:center;
      color:white;
      float:right;
      margin:10px;
    }
  </style>
</head>
<body>
  <div class="nav">
  NAV
  </div>
</body>
</html>

如何在屏幕大小更改时禁用jquery切换效果？

2 个答案:

jsfiddle demo