jQuery之导航菜单(点击该父节点时子节点显示,同时子节点的同级隐藏,但是同级的父节点始终显示)
注:对于同一个对象不超过3个操作的,可直接写成一行,超
过3个操作的建议每行写一个操作。这样可读性较强,可提高代码的可读性和可维护性
核心代码:
$(".has_children").click(function(){
$(this).addClass("highlight") //为当前元素增加highlight类
.children("a").show().end() //将子节点的<a>元素显示出来并重新定位到上次操作的元素
.siblings().removeClass("highlight")获取元素的兄弟元素,并去掉它们的highlight类
.children("a").hide();//将兄弟元素下的<a>元素隐藏
})
以上js代码的意思为:当点击含有class名为“has_children
”的节点时,其子节点元素“a”添加上类“highlight”并且
显示,同时该同辈元素“a”去掉class"highlight"并隐藏。
全部过程:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery的第一个demo</title>
<script src="js/jquery-2.1.1.min.js" rel="script"></script>
<style>
.menu{
width: 200px;
}
.has_children{
background: #f00;
color: yellow;
cursor: pointer;
}
.highlight{
background: #647787;
color: #f0f;
}
div{
padding: 0;
margin: 10px 0;
}
div a{
background: #1a272f;
color: #fff;
display: none;
width: 200px;
float: left;
}
</style>
<script>
$(document).ready(function () {
$(".has_children").click(function(){
$(this).addClass("highlight").children("a").show().end().siblings().
removeClass("highlight").children("a").hide();
})
}) </script>
</head>
<body>
<div class="menu">
<div class="has_children">
<span>第一个节点</span>
<a>子节点1</a>
<a>子节点2</a>
<a>子节点3</a>
<a>子节点4</a>
</div>
<div class="has_children">
<span>第二个节点</span>
<a>子节点1</a>
<a>子节点2</a>
<a>子节点3</a>
<a>子节点4</a>
</div>
<div class="has_children">
<span>第三个节点</span>
<a>子节点1</a>
<a>子节点2</a>
<a>子节点3</a>
<a>子节点4</a>
</div>
</div>
</body>
</html>
jQuery之导航菜单(点击该父节点时子节点显示,同时子节点的同级隐藏,但是同级的父节点始终显示)的更多相关文章
- jQuery弹性滑动导航菜单实现思路及代码
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...
- jquery 滑块导航菜单
带滑块的导航菜单,鼠标悬浮时,滑块会移动至鼠标位置,离开时,滑块会回到原来的位置,点击菜单之后滑块会停留在被点击菜单位置,等待下一次的鼠标悬浮事件或者点击事件,效果图: 图片效果不行,直接上代码: & ...
- JQuery 实现导航菜单的高亮显示
需求是这样的 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 网上说的思路是这样的: 在菜单层的 ...
- jQuery滑动导航菜单
js: $(function(){ $("ul.sub").parent().append("<span></span>"); $(&q ...
- 导航菜单点击图片切换--jquery
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 用js实现导航菜单点击切换选中时高亮状态
随着用户点击导航或菜单上不同的页面,出现此选项高亮显示或变为一个新的样式是经常用到的.实现它所用的原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的 ...
- jquery 树形导航菜单无限级
转自:http://www.jb51.net/article/71615.htm 侵删<!DOCTYPE html> <html lang="en"> &l ...
- 用js实现超链接导航菜单点击切换选中时的状态
项目中使用到点解导航切换不同的颜色,如果只是li选项卡还好办,这次用到的超链接选项卡,因为a链接每次点击都会刷新,所以浏览器记不住点击的状态,也没法切换点击状态,因为项目中有好多地方要用到,在网上找了 ...
- jQuery 浮动导航菜单(购物网站商品类型)
单页面网页内容较多,页面长度较大,需要方便快速的在页面的不同位置进行定位,所以浮动菜单逐渐流行了起来,如下图 男装.女装.美妆等. 这种菜单功能分为两部分: 1.点击菜单项,网页滚动到对应位置,可简单 ...
随机推荐
- Springboot的日志管理&Springboot整合Junit测试&Springboot中AOP的使用
==============Springboot的日志管理============= springboot无需引入日志的包,springboot默认已经依赖了slf4j.logback.log4j等日 ...
- SpringCloud Netflix Eureka(服务注册/发现)
⒈Eureka是什么? Eureka是Netflix的一个子模块,也是核心模块之一,Eureka是一个基于REST的服务,用于定位服务以实现云端中间层服务发现和故障转移,服务注册与发现对于微服务架构来 ...
- Linux iptables防火墙
查找安装包yum list | grep iptables 安装iptables yum install iptables-services 重启防火墙使配置文件生效 systemctl restar ...
- Python换行符问题:\r\n还是\n?
今天写一个Python脚本去读取一个txt文件时,发现一个很有趣的现象: 如果这个文件是用atom编辑器写的,发现换行符是'\r'.这样一来去逐行读取数据就失效了,因为用open函数 去打开该文件re ...
- js中 && 和 || 的用法
js中的&& 和 || 一直以为是php那一套,上网查了一些资料,才发现不一样 a() && b() :如果执行a()后返回true,则执行b()并返回b的值:如果执行 ...
- js判断空字符串、null、undefined、空格、中文空格
代码 function isEmpty(obj) { if (obj === null) return true; if (typeof obj === 'undefined') { return t ...
- 【转】C++ 11 并发指南一(C++ 11 多线程初探)
引言 C++ 11自2011年发布以来已经快两年了,之前一直没怎么关注,直到最近几个月才看了一些C++ 11的新特性,算是记录一下自己学到的东西吧,和大家共勉. 相信Linux程序员都用过Pthrea ...
- struts2框架之文件下载(参考第三天学习笔记)
下载 1. 下载是一种响应方式 正常的响应:响应正文是html:response.getWriter().print("html"); 下载的响应: 1.一个流:字节数据:resp ...
- struts2框架之文件上传(参考第三天学习笔记)
上传 1. 上传对表单的要求 * method=post * enctype=multipart/form-data 2. 上传对servlet要求 * getParameter()不能再使用! -- ...
- c++内存对齐原理
转载自http://blog.csdn.net/it_yuan/article/details/24651347 #类中的元素 0. 成员变量 1. 成员函数 2. 静态成员变量 3. 静 ...