jQuery 菜单栏 展开与收缩例子
废话少说，上代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>测试 查找下一个元素</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#menu ul li:first ul").show();
$("#menu ul li:gt(0) ul").hide();
$("#menu li a.parentMenu").click(function () {
if ($(this).next(".childMenu").is(":hidden")) {
$("ul .childMenu").hide();
$(this).next(".childMenu").show();
}
else {
$("ul .childMenu").hide();
$(this).next(".childMenu").hide();
}
});
});
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#" class="parentMenu">一级菜单A</a>
<ul class="childMenu">
<li>A的子菜单</li>
<li>A的子菜单</li>
<li>A的子菜单</li>
<li>A的子菜单</li>
</ul>
</li>
<li><a href="#" class="parentMenu">一级菜单B</a>
<ul class="childMenu">
<li>B的子菜单</li>
<li>B的子菜单</li>
<li>B的子菜单</li>
<li>B的子菜单</li>
</ul>
</li>
<li><a href="#" class="parentMenu">一级菜单C</a>
<ul class="childMenu">
<li>C的子菜单</li>
<li>C的子菜单</li>
<li>C的子菜单</li>
<li>C的子菜单</li>
</ul>
</li>
<li><a href="#" class="parentMenu">一级菜单D</a>
<ul class="childMenu">
<li>D的子菜单</li>
<li>D的子菜单</li>
<li>D的子菜单</li>
<li>D的子菜单</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
做一个笔记，主要记一下jQuery选择器 如何选中 下一个元素，如何选择 元素集中指定某个或者某几个元素
jQuery 菜单栏 展开与收缩例子的更多相关文章
- jQuery 当前展开其他收缩 三级下拉菜单（转载）
jQuery可展开收缩三级下拉菜单 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- jquery 菜单展开与收缩参考脚本
/* * metismenu - v1.1.3 * Easy menu jQuery plugin for Twitter Bootstrap 3 * https://github.com/onoku ...
- jQuery弹性展开收缩菜单插件gooey.js
分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <hea ...
- Ext.grid rowexpander的展开与收缩
这里写Ext.grid.Panel的展开与收缩. 1. 确保在grid存在rowexpander对象: plugins: [{ ptype: 'rowexpander', rowBodyTpl: [' ...
- jQuery图片旋转展示收缩效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery垂直展开折叠手风琴二级菜单
摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...
- DataGridView之行的展开与收缩
很多数据都有父节点与子节点,我们希望单击父节点的时候可以展开父节点下的子节点数据. 比如一个医院科室表,有父科室与子科室,点击父科室后,在父科室下面可以展现该科室下的所有子科室. 我们来说一下在Dat ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- ios知识点总结——UITableView的展开与收缩及横向Table
UITableVIew是iOS开发中使用最为广泛的一种控件,对于UITableView的基本用法本文不做探讨,本文主要是针对UITableView的展开与收缩进行阐述,在文章的后面也会探讨一下横向ta ...
随机推荐
- 主机WIFI网络环境下，Linux虚拟机网络设置
在主机使用WIFI网络环境下,怎么样进行虚拟机静态ip设置和连接互联网呢,原理什么太麻烦,另类的网络共享而已: 1.其实简单将网络连接模式设置成NAT模式即可. 2.虚拟网络编辑器依旧是桥接模式,选择 ...
- Leetcode5：Longest Palindromic Substring@Python
Given a string s, find the longest palindromic substring in s. You may assume that the maximum lengt ...
- 在linux下写一只优雅的爬虫---优雅的获取沈航所有学生的个人信息
一:ubuntu下安装python集成环境pycharm以及免费激活 安装 首先去下载最新的pycharm 2016.2.3,进行安装.可以直接在官网下载.选择自己所对应的版本 PyCharm 的激活 ...
- Spark的数据存储
Spark本身是基于内存计算的架构,数据的存储也主要分为内存和磁盘两个路径.Spark本身则根据存储位置.是否可序列化和副本数目这几个要素将数据存储分为多种存储级别.此外还可选择使用Tachyon来管 ...
- egret.Tween、egret.Ease
循环调用.只能设置boolean,不能设置循环次数. egret.Tween.).call(()=>{ console.log("循环调用"); }) 每次改变时,调用onC ...
- C# 获取系统时间及时间格式
--DateTime 数字型 System.DateTime currentTime=new System.DateTime(); 取当前年月日时分秒 currentTime=System. ...
- grep sed 大批量替换字符串
sed -i s/"str1"/"str2"/g `grep "str1" -rl --include="*.[ch]" ...
- apache配置多域名多站点记录
<VirtualHost *:80> DocumentRoot "/mnt/web/www.*.cn" ServerName www.*.cn ErrorLog ...
- css 取消默认的padding
;;} --透明 兼容写法 filter:alpha(opacity=90);-moz-opacity:0.9; -khtml-opacity: 0.9;opacity: 0.9;
- VC++中StretchBlt图像失真问题的解决办法
在 VC 中使用 StretchBlt 会碰到一些与点阵图大小缩放相关的一些问题.在扩展一个点阵图时,StretchBlt必须复制图素行或列.如果放大倍数不是原图的整数倍,那么此操作会造成产生的图像有 ...