jquery window 调整大小无效

Question

我正在尝试制作一个菜单，其中子菜单在悬停时打开，但在移动设备上（宽度 < 800）应在点击时触发子菜单。

我制作的这个 jquery 不起作用，它在悬停时有效，但是当你调整大小时 window 它仍然在悬停时触发，而不是在点击时触发。

jquery:

$(document).ready(function () {

    $(".menu ul li").hover(function () {
        $('li > ul').not($(this).children("ul").slideToggle(200)).hide();
    });

});
$(window).resize(function () {
    if ($(window).width() <= 800) {
        $(".menu ul li").click(function () {
            $('li > ul').not($(this).children("ul").slideToggle(200)).hide();
        });
    }
});

CSS:

.menu {
  width: 100%;
  background: #333;
}
.menu:before,
.menu:after {
  content: "";
  display: table;
}
.menu:after {
  clear: both;
}
.menu > ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu > ul > li {
  float: left;
  background: #e9e9e9;
  padding: 0;
  margin: 0;
}
.menu > ul > li > a {
  text-decoration: none;
  padding: 1.5em 3em;
  display: block;
  outline: 0 none;
}
.menu > ul > li > ul {
  display: none;
  background: #333;
  padding: 20px 30px;
  position: absolute;
  width: 100%;
  z-index: 99;
  left: 0;
  color: #fff;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .menu ul > li {
    float: none;
    width: 100%;
  }
  .menu ul > li > ul {
    position: relative;
  }
}

HTML:

<div class="menu">
        <ul>
            <li><a href="#">Home</a>
                <ul>
                    This is also mega menu
                </ul>
            </li>
            <li><a href="#">Who are we?</a>
                <ul>
                    This is mega menu
                </ul>
            </li>
            <li><a href="#">Services</li></a>
                <li><a href="#">Contact</li></a>
        </ul>
    </div>

当 window 调整大小或低于 800 像素时，如何使用 jquery 将悬停状态更改为单击状态？

Answer 1

您可以使用 .off() 方法取消绑定附加的事件，并确保使用 .on() 绑定其他事件：

$(document).ready(function() {
  $(".menu ul li").on('mouseenter', function() {
    $('> ul', this).stop().slideToggle(200); // this would do, as per context applied with "this"
  });

  $(window).resize(function() {
    if ($(window).width() <= 800) {
      $(".menu ul li").off().on('click', function() {
        $('> ul', this).stop().slideToggle(200); // this would do, context applied with "this"
      });
    }
  }).resize(); // trigger the resize() event on dom ready.
}); // <-----------wrap everything in the doc ready block

Plnkr demo

更好的一个：

// make a global function which toggles the submenus.
function submenutoggler() {
  $('> ul', this).stop().slideToggle(200); // .stop() will tackle the multiple clicks.
}

$(document).ready(function() {    
  $(window).resize(function() {
    if ($(window).width() <= 800) {
      $(".menu ul li").off().on('click', submenutoggler); // if mobile bind click
    }else{
      $(".menu ul li").on('mouseenter', submenutoggler); // if desktop bind mouseenter
    }
  }).resize(); // trigger the resize to execute at dom ready.

}); // <----wrap it within dom ready block.

Updated plnkr.

Answer 2

这样使用

$(document).ready(function () {

    $(".menu ul li").on('hover',function () {
        $('li > ul').not($(this).children("ul").slideToggle(200)).hide();
    });

});
$(window).on('resize'function () {
    if ($(window).width() <= 800) {
        $(".menu ul li").on('click',function () {
            $('li > ul').not($(this).children("ul").slideToggle(200)).hide();
        });
    }
});

Answer 3

您需要在绑定新事件之前解绑该事件。我已经修改了您的代码，请在此处查看 fiddle：http://jsfiddle.net/sachinkk/nu1dbp5a/

此外，在 HTML 中进行了更改。希望这会有所帮助。

Make sure while loading the page, the size of a page should be more than 800px. (events are binding after page resizes)

$(document).ready(function () {

    $(".menu ul li").hover(function () {
        $('li > ul').not($(this).children("ul").slideDown(200)).hide();
    },function(){
     $('li > ul').not($(this).children("ul").slideUp(200)).hide();
    });

});
$(window).resize(function () {
    if ($(window).width() <= 800) {
        $(".menu ul li").unbind('hover');
        $(".menu ul li").unbind('click');
        $(".menu ul li").click(function (e) {
            $('li > ul').not($(this).children("ul").slideToggle(200)).hide();
        });
    }
    else{
        if ($(window).width() > 800){
        $(".menu ul li").unbind('click');
            $(".menu ul li").unbind('hover');
        $(".menu ul li").hover(function () {
            $('li > ul').not($(this).children("ul").slideDown(200));
        },function(){
            $('li > ul').not($(this).children("ul").slideUp(200));
        });      
        }
    }
});

.menu {
  width: 100%;
  background: #333;
}
.menu:before,
.menu:after {
  content: "";
  display: table;
}
.menu:after {
  clear: both;
}
.menu > ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu > ul > li {
  float: left;
  background: #e9e9e9;
  padding: 0;
  margin: 0;
}
.menu > ul > li > a {
  text-decoration: none;
  padding: 1.5em 3em;
  display: block;
  outline: 0 none;
}
.menu > ul > li > ul {
  display: none;
  background: #333;
  padding: 20px 30px;
  position: absolute;
  width: 100%;
  z-index: 99;
  left: 0;
  color: #fff;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .menu ul > li {
    float: none;
    width: 100%;
  }
  .menu ul > li > ul {
    position: relative;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
        <ul>
            <li><a href="#">Home</a>
                <ul>
                    <li>This is also mega menu</li>
                </ul>
            </li>
            <li><a href="#">Who are we?</a>
                <ul>
                    <li>This is mega menu</li>
                </ul>
            </li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

Answer 4

使用这个脚本

$(document).ready(function () {

       $(".menu ul li").hover(function () {
          if ($(window).width() > 800) {

                $('li > ul').not($(this).children("ul").slideToggle(200)).hide();
          }

        });
         $(".menu ul li").click(function () {
          if ($(window).width() <= 800) {

                $('li > ul').not($(this).children("ul").slideToggle(200)).hide();
          }
        });

});

jquery window 调整大小无效

jquery window resize not working

html

javascript

css

navigation

jquery

Plnkr demo

Updated plnkr.