如何在屏幕尺寸改变时禁用 jquery 切换效果？

Question

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

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

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

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

});
 }

Answer 1

好的，我假设您想在 window 小于 768 时隐藏导航...

这是适合我的代码。将其粘贴到 html 文件中。在浏览器中启动它。当您调整 window 的大小时，导航会适应。

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

Answer 2

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

辅助功能。您想确保在隐藏导航时，屏幕阅读器仍然可以访问它。
高效的调整大小处理程序。在大多数浏览器中，调整大小事件在调整大小期间连续调用，而不是在调整大小结束时调用一次。
调整大小时重置菜单可见性。您需要确保如果菜单折叠，则屏幕大小调整到隐藏切换的断点上方，导航是以编程方式显示。

jsfiddle demo

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();
});

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

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

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

使切换元素成为 <button> 或添加 role="button" 和 tabindex="0" 到 div 元素。如果使用按钮元素，您将需要添加一些 css 来删除默认样式。有关更多信息使用 aria 角色，请参阅：Using the button role.
将切换按钮包裹在 <nav> 标签内，因为它是导航的一部分。
添加描述切换按钮功能的听觉地标。为此，有很多 css 技巧。我将 <span class="nav-toggle-label">Toggle site navigation</span> 添加到您的标记。 nav-toggle-label class 明显隐藏了文本，但是屏幕阅读器仍会看到它并大声朗读它。

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

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

最后，重要，不要忘记您需要在页面中包含视口元标记 <head>：

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

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

如何在屏幕尺寸改变时禁用 jquery 切换效果？

How can i disable jquery toggle effect when the screen size changes?

jquery

responsive-design

jsfiddle demo