我正在尝试制作一个菜单,其中子菜单在悬停时打开,但在移动设备上(宽度 < 800)应在点击时触发子菜单。
我制作了这个不起作用的 jquery,它在悬停时有效,但是当您调整窗口大小时,它仍然在悬停时触发,而不是在单击时触发。
j查询:
$(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>
当窗口调整大小或低于 800 像素时,我如何使用 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();
}
});
});
关于javascript - jquery窗口调整大小不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33166053/