我正在处理以下代码段,并在将鼠标悬停在父级li上时,使下拉菜单保持下拉状态时遇到麻烦。该代码应该可以在移动和桌面渲染上使用。移动渲染工作正常,我遇到的问题仅出现在桌面渲染上。想知道是否有人可以指出我正确的方向。
$(document).ready(function() {
$("#navToggle a").click(function(e){
e.preventDefault();
$("header > div#top-container").slideToggle("slow");
$("header > div#bottom-container > nav").slideToggle("slow");
$("#logo").toggleClass("menuUp menuDown");
});
$(window).resize(function() {
if($( window ).width() >= "600") {
$("header > div#top-container").show();
$("header > div#bottom-container > nav").show();
if($("#logo").attr('class') == "menuDown") {
$("#logo").toggleClass("menuUp menuDown");
}
}
else {
$("header > div#top-container").hide();
$("header > div#bottom-container > nav").hide();
}
});
$("header > div#bottom-container > nav > ul > li > a").click(function(e) {
if ($(window).width() <= "600") {
if ($(this).siblings().size() > 0) {
e.preventDefault();
$(this).siblings().slideToggle("slow");
}
}
});
/////this is where the problem is occurring
$("header > div#bottom-container > nav > ul > li > a").hover(function(e) {
if ($(window).width() >= "600") {
if ($(this).siblings().size() > 0) {
e.preventDefault();
$(this).siblings().slideToggle("slow");
}
}
});
});
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
/* 1em @ 48em (768px) increasing to 2em @ 120em (1920px) */
@media (min-width: 48rem) {
:root {
font-size: calc(1rem + ((1vw - .48rem) * 1.389));
/* .48rem = viewportWidthMinimum /100 */
/* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */
}
}
/* Stop font scaling above 1920px */
@media (min-width: 120em) {
:root {
font-size: 2rem;
}
}
body {
background: #eee;
color: #444;
-webkit-font-smoothing: antialiased;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-weight: 400;
height: auto !important;
height: 100%;
min-height: 100%;
text-rendering: optimizeLegibility;
}
header>.menuDown {
box-shadow: 0 3px 5px rgba(0, 0, 0, .15);
}
header>.menuUp {
box-shadow: none;
}
header>div#navToggle {
background-color: rgba(0, 0, 0, .15);
position: absolute;
right: 0;
top: 0;
transition: all 300ms ease;
}
header>div#navToggle:hover {
background-color: rgba(0, 0, 0, .1);
}
header>div#navToggle>a {
color: rgba(255, 255, 255, .85);
display: block;
font-size: 0.85em;
font-weight: 600;
padding: 0 2.5rem;
text-decoration: none;
transition: all 300ms ease;
}
header>div#navToggle:hover>a {
color: rgba(255, 255, 255, 1);
}
header>#top-container {
display: none;
}
header>div#bottom-container {
display: flex;
flex-direction: column;
text-align: center;
}
header>div#bottom-container>nav {
background-color: rgb(250, 209, 14);
display: none;
flex: 1;
flex-grow: 1;
transform: all 300ms ease;
}
header>div#bottom-container nav>ul {
list-style-type: none;
}
header>div#bottom-container nav>ul>li {
border-bottom: 1px dotted rgba(0, 0, 0, .1);
position: relative;
}
header>div#bottom-container nav>ul>li:last-of-type {
border-bottom: none;
}
header>div#bottom-container nav>ul>li>a {
display: block;
color: rgba(0, 0, 0, .65);
font-weight: 700;
padding: 1.5rem 0;
text-decoration: none;
transition: all 250ms ease;
}
header>div#bottom-container nav>ul>li>a span.toggle {
background-color: rgba(0, 0, 0, .05);
border-radius: 3rem;
color: rgba(0, 0, 0, .25);
font-weight: 500;
padding: 2px 8px;
text-transform: lowercase;
}
header>div#bottom-container nav>ul>li>a span.caret {
display: none;
}
header>div#bottom-container>nav>ul>li:hover>a {
color: rgba(42, 35, 0, .5);
}
header>div#bottom-container>nav>ul>li>nav {
display: none;
overflow: hidden;
position: absolute;
right: 5%;
width: 90%;
z-index: 100;
background-color: rgb(51, 51, 51);
}
header>nav>ul>li>nav>ul>li>a {
color: rgba(255, 255, 255, .85);
transition: all 300ms ease;
}
header>nav>ul>li>nav>ul>li:hover>a {
background-color: rgba(0, 0, 0, .6);
color: rgba(255, 255, 255, 1);
}
/* Medium screens */
@media all and (min-width: 600px) {
header>#top-container {
background-color: red;
display: flex !Important;
flex-direction: row;
line-height: 90px;
padding: 0 3rem;
text-align: left;
width: 100%;
}
header>#top-container>div#box {
flex: 1;
}
header>#top-container>.box1 {
background-color: green;
flex-basis: 400px;
}
header>div#navToggle {
display: none;
}
header>div#bottom-container {
background-color: rgb(250, 209, 14);
color: rgba(42, 35, 0, 1);
flex-direction: row;
line-height: 90px;
padding: 0 3rem;
position: fixed;
text-align: left;
width: 100%;
border-top: .3rem solid #F9E484;
box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.65);
}
header>div#bottom-container>nav {
background-color: transparent;
display: block;
}
header>div#bottom-container>nav>ul {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
header>div#bottom-container nav>ul>li {
border-bottom: none;
position: static;
}
header>div#bottom-container nav>ul>li>a {
padding: 0 1.25rem;
}
header>div#bottom-container nav>ul>li>a span.toggle {
display: none;
}
header>div#bottom-container nav>ul>li>a span.caret {
border-bottom: 4px solid transparent;
border-top: 4px solid rgba(42, 35, 0, 1);
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-radius: 1px;
content: "";
display: inline-block;
height: 0;
margin: 0 0 0 .25rem;
transition: 250ms all ease;
width: 0;
vertical-align: middle;
}
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<header>
<div id='top-container'>
<div id="box" class='box1'>logo</div>
<div id="box" class='box2'>our story</div>
<div id="box" class='box3'>contact us</div>
<div id="box" class='box4'>gift us a review</div>
</div>
<div id="navToggle"><a href="#">Menu</a></div>
<div id='bottom-container'>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Blog <span class="toggle">Expand</span><span class="caret"></span></a>
<nav>
<ul>
<li><a href="#">Articles</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Humour</a></li>
<li><a href="#">Gaming</a></li>
<li><a href="#">Music</a></li>
</ul>
</nav>
</li>
<li><a href="#">Forum</a></li>
<li><a href="#">Help</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
您的.hover仅在您的A标签上。当您将鼠标悬停在子菜单上的A标签上时,可以有效地关闭菜单。您有两个选择:
1)将悬停代码放在同时包含A标签菜单和子菜单(NAV)的LI上。
2)将第二个鼠标悬停在子导航菜单上,以使其保持打开状态。我不建议您这样做,因为您可能会遇到一些奇怪的计时问题。
我还将考虑避免在移动设备上使用.hover进行条件检查,如果文档大小小于640,该条件检查甚至都不会附加该事件,因为这可能在某些移动浏览器(例如移动Safari)上引起意外行为(当用户点击这样的对象时,有时会尝试伪造悬停事件触发器)。移动Chrome浏览器不执行此操作。虽然只是一个建议。同样,如@Djave所述,与标记搜索相比,使用触发悬停的类将获得更好的结果。
我已经在下面用LI上的鼠标悬停而不是A标签更新了您的代码。
$(document).ready(function() {
$("#navToggle a").click(function(e){
e.preventDefault();
$("header > div#top-container").slideToggle("slow");
$("header > div#bottom-container > nav").slideToggle("slow");
$("#logo").toggleClass("menuUp menuDown");
});
$(window).resize(function() {
if($( window ).width() >= "600") {
$("header > div#top-container").show();
$("header > div#bottom-container > nav").show();
if($("#logo").attr('class') == "menuDown") {
$("#logo").toggleClass("menuUp menuDown");
}
}
else {
$("header > div#top-container").hide();
$("header > div#bottom-container > nav").hide();
}
});
$("header > div#bottom-container > nav > ul > li > a").click(function(e) {
if ($(window).width() <= "600") {
if ($(this).siblings().size() > 0) {
e.preventDefault();
$(this).siblings().slideToggle("slow");
}
}
});
/////this is where the problem is occurring
$("header > div#bottom-container > nav > ul > li").hover(function(e) {
if ($(window).width() >= "600") {
if ($(this).children("nav").size() > 0) {
e.preventDefault();
$(this).children("nav").slideToggle("slow");
}
}
});
});
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
/* 1em @ 48em (768px) increasing to 2em @ 120em (1920px) */
@media (min-width: 48rem) {
:root {
font-size: calc(1rem + ((1vw - .48rem) * 1.389));
/* .48rem = viewportWidthMinimum /100 */
/* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */
}
}
/* Stop font scaling above 1920px */
@media (min-width: 120em) {
:root {
font-size: 2rem;
}
}
body {
background: #eee;
color: #444;
-webkit-font-smoothing: antialiased;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-weight: 400;
height: auto !important;
height: 100%;
min-height: 100%;
text-rendering: optimizeLegibility;
}
header>.menuDown {
box-shadow: 0 3px 5px rgba(0, 0, 0, .15);
}
header>.menuUp {
box-shadow: none;
}
header>div#navToggle {
background-color: rgba(0, 0, 0, .15);
position: absolute;
right: 0;
top: 0;
transition: all 300ms ease;
}
header>div#navToggle:hover {
background-color: rgba(0, 0, 0, .1);
}
header>div#navToggle>a {
color: rgba(255, 255, 255, .85);
display: block;
font-size: 0.85em;
font-weight: 600;
padding: 0 2.5rem;
text-decoration: none;
transition: all 300ms ease;
}
header>div#navToggle:hover>a {
color: rgba(255, 255, 255, 1);
}
header>#top-container {
display: none;
}
header>div#bottom-container {
display: flex;
flex-direction: column;
text-align: center;
}
header>div#bottom-container>nav {
background-color: rgb(250, 209, 14);
display: none;
flex: 1;
flex-grow: 1;
transform: all 300ms ease;
}
header>div#bottom-container nav>ul {
list-style-type: none;
}
header>div#bottom-container nav>ul>li {
border-bottom: 1px dotted rgba(0, 0, 0, .1);
position: relative;
}
header>div#bottom-container nav>ul>li:last-of-type {
border-bottom: none;
}
header>div#bottom-container nav>ul>li>a {
display: block;
color: rgba(0, 0, 0, .65);
font-weight: 700;
padding: 1.5rem 0;
text-decoration: none;
transition: all 250ms ease;
}
header>div#bottom-container nav>ul>li>a span.toggle {
background-color: rgba(0, 0, 0, .05);
border-radius: 3rem;
color: rgba(0, 0, 0, .25);
font-weight: 500;
padding: 2px 8px;
text-transform: lowercase;
}
header>div#bottom-container nav>ul>li>a span.caret {
display: none;
}
header>div#bottom-container>nav>ul>li:hover>a {
color: rgba(42, 35, 0, .5);
}
header>div#bottom-container>nav>ul>li>nav {
display: none;
overflow: hidden;
position: absolute;
right: 5%;
width: 90%;
z-index: 100;
background-color: rgb(51, 51, 51);
}
header>nav>ul>li>nav>ul>li>a {
color: rgba(255, 255, 255, .85);
transition: all 300ms ease;
}
header>nav>ul>li>nav>ul>li:hover>a {
background-color: rgba(0, 0, 0, .6);
color: rgba(255, 255, 255, 1);
}
/* Medium screens */
@media all and (min-width: 600px) {
header>#top-container {
background-color: red;
display: flex !Important;
flex-direction: row;
line-height: 90px;
padding: 0 3rem;
text-align: left;
width: 100%;
}
header>#top-container>div#box {
flex: 1;
}
header>#top-container>.box1 {
background-color: green;
flex-basis: 400px;
}
header>div#navToggle {
display: none;
}
header>div#bottom-container {
background-color: rgb(250, 209, 14);
color: rgba(42, 35, 0, 1);
flex-direction: row;
line-height: 90px;
padding: 0 3rem;
position: fixed;
text-align: left;
width: 100%;
border-top: .3rem solid #F9E484;
box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.65);
}
header>div#bottom-container>nav {
background-color: transparent;
display: block;
}
header>div#bottom-container>nav>ul {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
header>div#bottom-container nav>ul>li {
border-bottom: none;
position: static;
}
header>div#bottom-container nav>ul>li>a {
padding: 0 1.25rem;
}
header>div#bottom-container nav>ul>li>a span.toggle {
display: none;
}
header>div#bottom-container nav>ul>li>a span.caret {
border-bottom: 4px solid transparent;
border-top: 4px solid rgba(42, 35, 0, 1);
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-radius: 1px;
content: "";
display: inline-block;
height: 0;
margin: 0 0 0 .25rem;
transition: 250ms all ease;
width: 0;
vertical-align: middle;
}
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<header>
<div id='top-container'>
<div id="box" class='box1'>logo</div>
<div id="box" class='box2'>our story</div>
<div id="box" class='box3'>contact us</div>
<div id="box" class='box4'>gift us a review</div>
</div>
<div id="navToggle"><a href="#">Menu</a></div>
<div id='bottom-container'>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Blog <span class="toggle">Expand</span><span class="caret"></span></a>
<nav>
<ul>
<li><a href="#">Articles</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Humour</a></li>
<li><a href="#">Gaming</a></li>
<li><a href="#">Music</a></li>
</ul>
</nav>
</li>
<li><a href="#">Forum</a></li>
<li><a href="#">Help</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>