我试图创建一个菜单,其中子菜单在悬停时打开,但是在移动设备上(宽度<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从悬停更改为单击?
答案 0 :(得分:1)
使用此脚本
$(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();
}
});
});
答案 1 :(得分:0)
您可以使用.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.
答案 2 :(得分:0)
像这样使用
$(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();
});
}
});
答案 3 :(得分:0)
您需要在绑定新事件之前取消绑定事件。我修改了你的代码,请看这里的小提琴: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>