AJAX学习笔记04

举报
wh_bn 发表于 2021/12/15 22:46:26 2021/12/15
【摘要】 AJAX学习笔记04 学习课程: 学习内容 相关文件 可伸缩的级联菜单和局部刷新 jquery-menu.jsp jquery-menu.js jquery.js jqu...

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

  1.    <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

 

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

 

jquery-menu.js

  1. $(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");});});

 

文章来源: blog.csdn.net,作者:fengda2870,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/fengda2870/article/details/3293997

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。