《JavaWeb---JQuery实现可收缩的级联菜单》

来源：互联网发布：ddos攻击网络编辑：程序博客网时间：2024/05/17 03:12

<!DOCTYPE html><html>  <head>    <title>可收缩的菜单</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <script type="text/javascript" src="jslib/jquery.js"></script>    <script type="text/javascript" src="jslib/menu.js"></script><link rel="stylesheet" type="text/css" href="css/menu.css">  </head>    <body>    <ul><a href="javascript:void(0)">主菜单1</a>    <li>子菜单</li>    <li>子菜单</li>    <li>子菜单</li>    </ul>    <ul><a href="javascript:void(0)">主菜单2</a>    <li>子菜单</li>    <li>子菜单</li>    <li>子菜单</li>    </ul>  </body></html>

CSS代码

li{list-style: none;margin-left: 18px;display: none;}<!--去掉a标签默认的超链接样式-->a:link { text-decoration:none; } a:visited { color: #0066CC;text-decoration:none; } a:active {color: #0066CC; text-decoration:none; }

JS代码

//利用JQuery，当页面加载时注册执行的函数$(document).ready(function(){//给a标签注册点击事件$("a").click( function () {//获取与a标签等级的所有li标签var lis = $(this).nextAll("li"); //切换li标签的显示样式lis.toggle("slow");});});