Jquery中菜单的展开和折叠
jquery内容
<script>
$(function () {
$("dl dt").click(function () {
$(this).siblings().toggle().parent().siblings().children("dd").hide();
});
});
</script>
标签内容
<dl id="ctl00_menuPassMgr">
<dt><span>
<img alt="" src='images/ico03.gif' /></span> <span><a href="javascript:">密码管理</a></span>
</dt>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/SysManager/ChangePassword.aspx'>
修改密码</a></span>
</dd>
</dl>
<dl id="ctl00_menuHourse">
<dt><span>
<img alt="" src='images/ico03.gif' /></span> <span><a href="javascript:">宿舍管理</a></span>
</dt>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/SchoolHourseManager/SchoolHourseList.aspx'>
学生宿舍查询</a></span>
</dd>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/SchoolHourseManager/SchoolHourseEdit.aspx'>
学生宿舍新增</a></span>
</dd>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/SchoolHourseManager/CheckStudentDormitory.aspx'>
学生宿舍分配</a></span>
</dd>
</dl>
<dl id="ctl00_menuStudent">
<dt><span>
<img alt="" src='images/ico03.gif' /></span> <span><a href="javascript:">学生管理</a></span>
</dt>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/StudentManager/StudentList.aspx'>
学生信息列表</a></span>
</dd>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/StudentManager/StudentEdit.aspx'>
学生信息新增</a></span>
</dd>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/ClassManager/ClassList.aspx'>
班级信息列表</a></span>
</dd>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/ClassManager/ClassEdit.aspx'>
班级信息新增</a></span>
</dd>
</dl>
<dl id="ctl00_menuTeacher">
<dt><span>
<img alt="" src='images/ico03.gif' /></span> <span><a href="javascript:">教师管理</a></span>
</dt>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/TeacherManager/TeacherEdit.aspx'>
教师入职登记</a></span>
</dd>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/TeacherManager/TeacherList.aspx'>
教师信息查询</a></span>
</dd>
</dl>
<dl id="ctl00_menuReport">
<dt><span>
<img alt="" src='images/ico03.gif' /></span> <span><a href="javascript:">缴费及统计报表</a></span>
</dt>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/TeacherManager/TeacherList.aspx'>
学生缴费入口</a></span>
</dd>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/TeacherManager/TeacherList.aspx'>
学生缴费查询</a></span>
</dd>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/TeacherManager/TeacherList.aspx'>
收件信息查看</a></span>
</dd>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/TeacherManager/TeacherList.aspx'>
发件信息查看</a></span>
</dd>
</dl>
Jquery中菜单的展开和折叠的更多相关文章
- element-ui 框架中使用 NavMenu 导航菜单组件时,点击一个子菜单会出现多个子菜单同时展开或折叠?
我在使用 elment-ui 框架的导航组件时,直接粘贴复制了官网上 (http://element-ui.cn/#/zh-CN/component/menu)的例子不会出错,但是当我将他们转化为动态 ...
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解
在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...
- jQuery文本段落展开和折叠效果
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- jquery实现菜单功能(单击展开或者关闭)-一般应用于后台
<!doctype html> <html> <head> <meta charset="gb2312"> <title> ...
- JQuery EasyUI treegrid展开与折叠,以及数据加载两次的问题
问题:做项目的时候遇到代码生成的页面,只默认展开了一级节点,每次操作之后刷新还要手动一级一级展开,太麻烦了 官方API:http://www.jeasyui.net/plugins/186.html ...
- jQuery 文本段落展开和折叠效果
jQuery 文本段落展开和折叠效果 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" c ...
- 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
- jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象
这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...
随机推荐
- 开启VS2017之旅
- Raft协议--中文论文介绍
本篇博客为著名的 RAFT 一致性算法论文的中文翻译,论文名为<In search of an Understandable Consensus Algorithm (Extended Vers ...
- Junit 报错: Failed to load ApplicationContext
今天在使用Junit测试时候,报了个错误: Failed to load ApplicationContext, aspect not found;挺奇怪的 我又没有调用你,之前还好好的,现在不能使用 ...
- 二进制中 1 的个数(C++ 和 Python 实现)
(说明:本博客中的题目.题目详细说明及参考代码均摘自 “何海涛<剑指Offer:名企面试官精讲典型编程题>2012年”) 题目 请实现一个函数,输入一个整数,输出该数二进制表示中 1 的个 ...
- javascript 时间日期处理相加,减操作方法js
javascript 时间日期处理相加,减操作方法js function dateAddDays(dataStr,dayCount){ var strdate = dataStr; // 2017年0 ...
- v1.0.2-2017.04.26
v1.0.2-2017.04.26 增加支付宝.微信查询接口 增加订单轮询工程 增加网关下单后发起订单轮询业务流程 v1.0.1-2017.04.05 修复分页乱码bug 增加支付密码字段.商户服务器 ...
- CSS position属性 标签: css 2016-09-06 15:58 78人阅读 评论(0) 收藏
踩了position的坑,主要是因为对position属性理解不深. 以下是w3school中对position的解释: 可能的值 值 描述 absolute 生成绝对定位的元素,相对于 static ...
- CMake是用于生成make文件的跨平台编译文件
参考: https://www.cnblogs.com/hbccdf/p/introduction_of_cmake.html https://elloop.github.io/tools/2016- ...
- ZT SAFE_DELETE
SAFE_DELETE 分类: c/C++ 2008-10-14 14:26 706人阅读 评论(2) 收藏 举报 delete文本编辑nullflash破解加密 我发现学程序大家差不多都有相似的地方 ...
- BZOJ2194:快速傅立叶之二(FFT)
Description 请计算C[k]=sigma(a[i]*b[i-k]) 其中 k < = i < n ,并且有 n < = 10 ^ 5. a,b中的元素均为小于等于100的非 ...