我正在尝试使用 jquery 创建一个菜单，但是当我将鼠标悬停在“菜单”上并尝试单击其中一个按钮时，它会向上滑动。谁知道如何解决这个问题？ 这是我的 Jquery:
$(document).ready(function() {
$(".slide").hide();
$("#menu").hover(function() {
$(".slide").slideToggle("slow");
});
$(".logo").click(function() {
window.location = 'index.html';
});
$(".logo").hover(function() {
});
});
完整代码如下: https://jsfiddle.net/lollz4/dh1kLh8L/
附言我是新来的，如果我做错了什么，我深表歉意。
最佳答案
在您的菜单周围添加一个额外的包装器，并改为检查该元素上的悬停状态:
$(document).ready(function() {
$(".slide").hide();
$("#menu-wrapper").hover(function() {
$(".slide").slideToggle("slow");
});
$(".logo").click(function() {
window.location = 'index.html';
});
$(".logo").hover(function() {
});
});* {
margin-top: 0px;
margin-left: 0px;
}
body {
background-color: #EBEDEF;
}
.page {
background: white;
width: 100%;
height: 52em;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 2px;
position: absolute;
margin: 0;
padding: 0;
}
#menu {
display: block;
position: absolute;
left: 0em;
top: 0em;
background-color: #2E4053;
border: none;
padding: 15px 32px;
font-size: 16px;
clear: both;
}
.slide {
display: block;
left: 0em;
top: 0em;
position: relative;
background-color: #2E4053;
border: none;
padding: 15px 32px;
font-size: 16px;
clear: both;
}
.logo {
height: 3em;
width: 100%;
background-color: #ABB2B9;
padding: 0px;
margin: 0px;
position: fixed;
}
div img {
margin: auto;
width: 8em;
height: 3em;
background-color: #607D8B;
border-radius: 2px;
display: block;
padding-top: 0;
}
div img:hover {
opacity: 0.80;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="scripts.js"></script>
<title>Stefan's Website</title>
</head>
<body>
<div class="logo">
<img src="http://previews.123rf.com/images/alexutemov/alexutemov1511/alexutemov151100338/48202700-Pizza-flat-icon-logo-template-Pizza-food-silhouette-Pizza-piece-logo-pizza-slice-logo-Pizza-menu-ill-Stock-Vector.jpg" width="160em" height="90em">
<div id="menu-wrapper">
<button id="menu">
Menu
</button>
<button class="slide">
Pagina1
</button>
<button class="slide">
Pagina2
</button>
<button class="slide">
Pagina3
</button>
</div>
</div>
<!--<div class="page">
</div>-->
</body>
</html>关于javascript - 尝试单击时菜单不会保持打开状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40578546/