Javascript 为什么jquery下拉列表不起作用？

这段代码似乎正确地显示了所有内容，但当在浏览器中启动时，下拉列表不起作用。悬停样式和所有功能都正常工作，除了下拉菜单。 多谢各位

HTML:

JavaScript:

$(document).ready(function() {
    $('.navigation li').hover(

    function() {
        $('ul', this).fadeIn();
    }, function() {
        $('ul', this).fadeOut();
    });
});

---

您的脚本顺序错误

而不是

<script src="Script/main.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>

试试这个：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script src="Script/main.js"></script>

并创建一个嵌套列表，以便您的选择器在main.js文件中是正确的：

<ul class="navigation">
   <li><a href="#">Main Cat 1</a></li>
   <li><a href="#">Main Cat 2 </a>
       <ul>
           <li><a href="#">Sub Cat 2-1</a></li>
           <li><a href="#">Sub Cat 2-2</a></li>
           <li><a href="#">Sub Cat 2-3</a></li>
           <li><a href="#">Sub Cat 2-4</a></li>
           <li><a href="#">Sub Cat 2-5</a></li>
       </ul>
   </li>
   <li><a href="#">Main Cat 3 </a>
       <ul>
           <li><a href="#">Sub Cat 3-1</a></li>
           <li><a href="#">Sub Cat 3-2</a></li>
           <li><a href="#">Sub Cat 3-3</a></li>
           <li><a href="#">Sub Cat 3-4</a></li>
           <li><a href="#">Sub Cat 3-5</a></li>
           <li><a href="#">Sub Cat 3-6</a></li>
           <li><a href="#">Sub Cat 3-7</a></li>
       </ul>
   </li>
</ul>

使用“#”作为href值时可能会出现问题

这会有所不同。问题是，您的html中还有第二个错误。我已经在回答中添加了解决方案。您是否介意解释一下jquery中的选择器是如何处理此列表的。。？我似乎无法理解这一点，也无法理解为什么子类别必须包含在它们的主要目标的ul中。您正在当前的

li

元素的上下文中搜索

ul

元素

$（'ul'，this）

与

$（this）相同。查找（'ul'）

。因此，如果列表项中没有

ul

元素，则无法找到。这就是为什么您必须将整个列表嵌套在列表项中的原因。谢谢，这更有意义。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script src="Script/main.js"></script>

<ul class="navigation">
   <li><a href="#">Main Cat 1</a></li>
   <li><a href="#">Main Cat 2 </a>
       <ul>
           <li><a href="#">Sub Cat 2-1</a></li>
           <li><a href="#">Sub Cat 2-2</a></li>
           <li><a href="#">Sub Cat 2-3</a></li>
           <li><a href="#">Sub Cat 2-4</a></li>
           <li><a href="#">Sub Cat 2-5</a></li>
       </ul>
   </li>
   <li><a href="#">Main Cat 3 </a>
       <ul>
           <li><a href="#">Sub Cat 3-1</a></li>
           <li><a href="#">Sub Cat 3-2</a></li>
           <li><a href="#">Sub Cat 3-3</a></li>
           <li><a href="#">Sub Cat 3-4</a></li>
           <li><a href="#">Sub Cat 3-5</a></li>
           <li><a href="#">Sub Cat 3-6</a></li>
           <li><a href="#">Sub Cat 3-7</a></li>
       </ul>
   </li>
</ul>