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

Question

下拉菜单将不起作用！ 对于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>

Answer 1

使用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

Answer 2

也许可以使用纯CSS解决方案来代替JavaScript，除非您想制作一些动画。

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-01-13 00:06:38

解决方案2
0 2015-01-13 00:27:41

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-01-13 00:06:38

解决方案2 0 2015-01-13 00:27:41

解决方案1
2 已采纳 2015-01-13 00:06:38

解决方案2
0 2015-01-13 00:27:41