Javascript 鼠标悬停在列表上时展开列表-css列表树视图

我正在尝试建立CSS的基本列表树结构ulli。。。多层次的。我已经设法到了鼠标悬停在1级li的点，它显示了它的子ul li，当鼠标悬停在外时移回它原来的位置。然而，它删除活动类时，级别1，甚至它有子元素，所以我的问题是，我如何绑定检查鼠标是否在$this子元素上，而不是悬停到级别2等等

$document.readyfunction{ $'.Nav_tree_wrapper ul li'.eachfunction{ 如果$this.children'ul'。长度>0{ $this.addClass'parent'； } }; $.Nav_tree_wrapper ul li.parent>a.hover 作用{ $this.parent.toggleClass'active'； $this.parent.children'ul'。滑动切换'fast'； }，功能{ $this.parent.toggleClass'active'； $this.parent.children'ul'。滑动切换'fast'； } ; }; .导航树{ 列表样式：无外无； 填充：20px； } .Nav_tree_wrapper ul li ul{ 显示：无； 边际：0 12像素； 溢出：隐藏； 填充：0 25px； } .Nav_tree_ul li a{ 显示：块； 填充：15px 10px 15px 15px； 线高：22px； 位置：相对位置； 边框底部：1px槽000； }

---

你的代码就快到了。你只需要注意li.parent而不是li.parent>a。因此，您的javascript代码可能如下所示：

 $(document).ready(function() {

   $('.Nav_tree_wrapper ul li').each(function() {
     if ($(this).children('ul').length > 0) {
       $(this).addClass('parent');
     }
   });

   $(".Nav_tree_wrapper ul li.parent").hover(
     function() {
       $(this).toggleClass('active');
       $(this).children('ul').slideToggle('fast');


     }, function() {
       $(this).toggleClass('active');
       $(this).children('ul').slideToggle('fast');
     }
   );
 });

还有JS小提琴来测试它：

但是有一个小问题。。。 如果您尝试过JS小提琴，您会立即看到问题。由于多个子层只在悬停时打开和关闭，它很快就会变得非常紧张。您可能希望将导航的第一级或第二级水平排列，这样就不会意外地过快触发悬停事件

或者，您可以使用jQuery悬停意图插件。它会将悬停的开始延迟100毫秒：