gpt4 book ai didi

javascript - 为什么我的下拉菜单代码不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 03:20:50 26 4
gpt4 key购买 nike

下拉菜单不起作用!对于 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 并将整个 pul 包装在一个 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);
});

jsFiddle Demo

关于javascript - 为什么我的下拉菜单代码不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27912921/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com