<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul ul{display: none} .nav{ width: 180px; height: 180px; background-color: red; } </style></head><body> <ul class="nav"> <li> <span>一级菜单</span> <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li> <span>一级菜单</span> <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li> <span>一级菜单</span> <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li> <span>一级菜单</span> <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> </ul></body><script src="jquery.js"></script><script> $(".nav").children("li").mouseover(function(){ $(this).children("ul").stop().show(500) .parent().siblings().children("ul").stop().hide(500); }) // 动画开启之前，先停止 // 计时器开启之前，先清除 // .parent()父元素选择器 // .siblings()除了当前的所有同级（兄弟）</script></html>
