jquery实现动态菜单

最新推荐文章于 2021-06-04 05:30:38 发布

jubincn

最新推荐文章于 2021-06-04 05:30:38 发布

阅读量6.7k

点赞数

分类专栏： JavaScript 文章标签： jquery jquery菜单 stylesheet javascript function css

本文链接：https://blog.csdn.net/jubincn/article/details/4476097

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

jquery实现动态菜单的方式跟jquery弹出窗口的方式差不多，都是采用JavaScript操作css的方式。

其具体步骤可以分为以下几步：

创建一个含有要表达的菜单的html页面

<html> <head> <title>jquery示例2：jquery菜单</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/menu.css" mce_href="css/menu.css"> <mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script> <mce:script type="text/javascript" src="jslib/jquerymenu.js" mce_src="jslib/jquerymenu.js"></mce:script> </head> <body> <ul> <a href="#" mce_href="#">我是菜单1</a> <li>我是子菜单1</li> <li>我是子菜单2</li> </ul> <ul> <a href="#" mce_href="#">我是菜单2</a> <li>我是子菜单3</li> <li>我是子菜单4</li> </ul> <div id="content"></div> </body> </html>

创建一个css文件来控制菜单的显示

/*让所有的li都不显示小圆点，可以使用css标签选择器*/ li{ /*使list前的小圆点消失*/ list-style: none; /*缩进效果*/ margin-left: 18px; /*隐藏菜单*/ display: none; } a{ /*文字的显示方式*/ text-decoration: none; }

创建一个JavaScript文件来控制菜单的显示

/* * 点击主菜单，子菜单显示；再次点击主菜单，子菜单隐藏 * 需要编写代码，使得主菜单在装载时添加onclick事件，使得点击主菜单可以显示子菜单 * 注册页面装载时执行的方法 */ $(document).ready(function(){ //var uls = $("ul"); //找到ul下的a节点 var as = $("ul > a"); as.click(function(){ //首先找到当前ul中的li，然后让li显示出来 //获取当前被点击的ul节点 var aNode = $(this); //找到被点击ul节点下的所有li节点 var lis = aNode.nextAll("li"); //显示或隐藏ul的li子节点们 lis.toggle("slow"); }); });