下拉菜单不起作用!对于 css，我使用了“display: none;”隐藏列表，但我想知道这是否是执行下拉菜单的最有效方法？我在代码学院元素中使用了这个概念。
我确定这里可能有一些代码可能会让您感到畏缩，但请不要着急，我绝对是编程方面的菜鸟!谢谢!
$(document).ready(function() {
$('p').hover(function() {
$(this).find('ul').fadeToggle(400);
});
});* {
margin: 0;
padding: 0;
}
.main {
margin: 0 auto;
height: 400px;
width: 400px;
}
.container {
max-width: 230px;
max-height: 300px;
margin: 0 auto;
background-color: #024F79;
}
p {
text-align: center;
color: #fff;
border-bottom: 1px solid #fff;
font-size: 18px;
padding: 8px;
}
ul {
list-style-type: none;
display: none;
}
ul li {
padding: 10px;
border-bottom: 1px solid white;
color: white;
font-size: 18px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<div class="main">
<div class="container">
<p>How do I ?</p>
<ul>
<li>View my Transcript</li>
<li>View my Conformation Page</li>
<li>Register for Courses</li>
<li>Pay for Courses/Exams</li>
</ul>
</div>
</div>
</body>最佳答案
$(this).find('ul') 将在 p 元素内部查找，因为使用 this 作为语境。你可以使用 .next()
$(this).next('ul').fadeToggle(400);
但是，更好的方法是重组您的 html 并将整个 p 和 ul 包装在一个 div 中以便于 UI 淡入淡出。
<div id="menu">
<p>How do I ?</p>
<ul>
<li>View my Transcript</li>
<li>View my Conformation Page</li>
<li>Register for Courses</li>
<li>Pay for Courses/Exams</li>
</ul>
</div>
然后使用您的原始代码，除了定位#menu 项
$('#menu').hover(function() {
$(this).find('ul').fadeToggle(400);
});
关于javascript - 为什么我的下拉菜单代码不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27912921/