jquery二级菜单。显示了jquery的方便
Posted hy96
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery二级菜单。显示了jquery的方便相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于jquery二级菜单。显示了jquery的方便的主要内容，如果未能解决你的问题，请参考以下文章