Question

下拉菜单无效！对于CSS我使用＆＃34; display：none;＆＃34;隐藏列表，但我想知道这是否是执行下拉菜单的最有效方式？我在codeacademy项目中使用了这个概念。

我相信这里可能会有一些代码可能让你感到畏缩，但请放轻松我，我是编程的绝对新手！谢谢！

＆＃13;

$(document).ready(function() {
  $('p').hover(function() {
    $(this).find('ul').fadeToggle(400);
  });
});

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 1

由于使用$(this).find('ul')作为上下文，

p会查看this元素的内部。您可以使用.next()

$(this).next('ul').fadeToggle(400);

但是，更好的方法是重构html，并将整个p和ul包含一个带有id的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

Answer 2

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

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

2 个答案: