[英]jquery window resize not working
我正在嘗試制作一個菜單,其中懸停時打開子菜單,但是在移動(寬度<800)上單擊時應觸發子菜單。
我做了這個無法正常工作的jQuery,它可以在懸停時工作,但是當您調整窗口大小時,它仍然會在懸停時觸發而不是單擊。
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>
當窗口調整大小或低於800px時,如何使用jquery從懸停更改為單擊?
使用這個腳本
$(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();
}
});
});
您可以使用.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
更好的一個:
// 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.
這樣使用
$(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();
});
}
});
您需要在綁定新事件之前取消綁定該事件。 我已經修改了您的代碼,請參見此處的小提琴: http : //jsfiddle.net/sachinkk/nu1dbp5a/
另外,對HTML進行了更改。 希望這會有所幫助。
確保在加載頁面時,頁面大小應大於800px。 (頁面大小調整后,事件具有約束力)
$(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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.