>下拉菜单将不起作用!对于css,我使用"显示:无;"来隐藏列表,但我想知道这是否是执行下拉菜单的最有效方法?我在一个代码学院项目中使用了这个概念。
我敢肯定这里可能有一些代码可能会让你畏缩,但请放轻松,我绝对是编程新手!谢谢!
$(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
作为上下文,$(this).find('ul')
将查看p
元素的内部。您可以使用.next()
$(this).next('ul').fadeToggle(400);
但是,更好的方法是重组 html 并使用具有 id 的div
包装整个p
和ul
,以促进 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);
});
jsFiddle Demo
也许你可以
使用纯粹的CSS解决方案,而不是使用JavaScript,除非你想制作一些动画。