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

Why wont my drop down menu code work

本文关键字：不起作用 代码 下拉菜单 我的 为什么      更新时间：2023-09-26

>下拉菜单将不起作用！对于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，除非你想制作一些动画。

相关文章：