AJAX学习笔记04

AJAX学习笔记04

学习课程：

学习内容	相关文件
可伸缩的级联菜单和局部刷新	jquery-menu.jsp jquery-menu.js jquery.js jquery-menu.css

实现效果：

单击主菜单，切换相应主菜单下的子菜单的显示状态，默认子菜单的状态为隐藏 上面两个ul和下面两个ul实现的功能略有不同 上面两个ul中单击事件的作用域为<a>标签 下面两个ul中单击事件的作用域为整个<ul>标签，包括<li>标签 注：在IE和FireFox浏览器下，运行网页所显示的效果是有差别的

三个文件的代码：

jquery-menu.jsp

<ul>    <a href="#">主菜单1</a>    <li>子菜单1</li>    <li>子菜单2</li>    </ul>    <ul>    <a href="#">主菜单1</a>    <li>子菜单1</li>    <li>子菜单2</li>    </ul>        <ul>    主菜单1    <li class="child">子菜单1</li>    <li class="child">子菜单2</li>    </ul>    <ul>    主菜单1    <li class="child">子菜单1</li>    <li class="child">子菜单2</li>    </ul>

jquery-menu.css

@CHARSET "UTF-8"; li { /*去掉子菜单前的小黑点*/ list-style: none; /*让子菜单缩进*/ margin-left: 16px; /*让所有的子菜单都隐藏*/ display: none; /*设置鼠标形状cursor: pointer;*/  }

jquery-menu.js

$(document).ready(function(){ //找到所有的主菜单 //var uls = $("ul"); //标签选择器 //var uls = $("ul").children("a"); //找到<ul>标签下的<a>标签 var uls_2 = $("ul > a"); //给每个主菜单注册单击事件 uls_2.click( function(){ //先找到当前ul中的li var ulNode = $(this); //切换显示状态,可选状态 slow , normal , fast , 空 //var lis = ulNode.children("li"); var lis = ulNode.nextAll("li"); lis.toggle("slow"); }); var uls_1 = $("ul"); //标签选择器 uls_1.click( function(){ //先找到当前ul中的li var ulNode = $(this); //切换显示状态,可选状态 slow , normal , fast , 空 var lis = ulNode.children("li.child"); //var lis = ulNode.nextAll("li"); lis.toggle("slow"); }); });