jQuery示例 | 分级菜单
Title
.header{
background-color: black;
color: wheat;
}
.content{
min-height: 50px;
}
.hide{
display: none;
}
<div class="item">
<div class="header">标题三</div>
<div class="content hide">内容</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.header').click(function(){ //为标签绑定事件,添加匿名函数
// 思路:
// 当前点击的标签 $(this)
// 获取某个标签的下一个标签
// 获取某个标签的父标签
// 获取所有的兄弟标签
// 添加样式和移除样式
// 正文:
// $(this).next().removeClass('hide');
// $(this).parent().siblings().find('.content').addClass('hide')
// 链式编程:
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
})
</script>
posted on
2019-04-29 15:47
CRIME
阅读(...)
评论(...)
编辑
收藏
jQuery示例 | 分级菜单的更多相关文章
- JS及Dom示例 | 分级菜单折叠
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于react实现无限分级菜单
在开发CMS(内容管理系统)系统时,一般都会用到一个侧边栏或者顶部的二级或者三级菜单,当点击或者鼠标悬浮时,菜单能够随之展开或收起. 本文纯粹为了练习一下react,因此我会在react环境下实现这么 ...
- 可控制导航下拉方向的jQuery下拉菜单代码
效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...
- jQuery Wheel 环形菜单插件5种效果演示
很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...
- 11款样式新颖的 jQuery/CSS3 网页菜单
今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...
- jquery 展开折叠菜单
jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...
- 炫酷实用的jQuery插件 涵盖菜单、按钮、图片
新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...
- jQuery弹性滑动导航菜单实现思路及代码
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...
- 打造简易可扩展的jQuery/CSS3 Tab菜单
原文:打造简易可扩展的jQuery/CSS3 Tab菜单 今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单,这款Tab菜单在切换时也有滑块的效果,先来看看效果图: 由与Tab菜 ...
随机推荐
- vCenter Server Heartbeat
1.简介 vCenter Server Heartbeat为VMware vCenter Server提供关键任务高可用性,保护虚拟基础架构免受硬件.网络.配置等的影响,基于Windows的服务,可为 ...
- Java内存模型(转载)
本文章节: 1.JMM简介 2.堆和栈 3.本机内存 4.防止内存泄漏 1.JMM简介 i.内存模型概述 Java平台自动集成了线程以及多处理器技术,这种集成程度比Java以前诞生的计算机语言要厉害很 ...
- numpy数组与python的list互转,然后用json写入文件与c交互
1.对于numpy的tofile方法,一个一维数组可以直接写成二进制形式,用c语言或者numpy.fromfile()可以读出来内容.而如果数组超过一维,tofile并不区分,也就是arr1=[1,2 ...
- redis整理の配置
redis有一个很强大也很重要的配置文件redis.conf.此文件可以随服务启动,为服务配置各种不同场景所需的参数: daemonize: 默认情况下,redis 不是在后台运行的,如果需要在后台运 ...
- C# 同步锁 lock Monitor
Lock关键字 C#提供lock关键字实现临界区,MSDN里给出的用法: Object thisLock = new Object();lock (thisLock){ // Critical c ...
- 7z文件格式及其源码的分析(三)
上一篇在这里. 这是7z文件格式分析的第三篇, 相信有了前两篇的准备,你已经了解了7z源码的大致结构, 以及如何简单调试7z的源码了. 很多同学是不是迫不及待想要拔去7z的神秘外衣,看看究竟了. 好 ...
- Transaction And Lock--死锁错误号1205
在TSQL中,如果需要判断当前错误是否是因为死锁引起,可以使用ERROR_NUMBER()=1205来判断在C#中,使用SQLException来捕获 SQLException.Number=1205 ...
- 从golang的垃圾回收说起(下篇)
文章来自网易云社区 4 Golang垃圾回收的相关参数 4.1 触发GC gc触发的时机:2分钟或者内存占用达到一个阈值(当前堆内存占用是上次gc后对内存占用的两倍,当GOGC=100时) # 表示 ...
- 【Selenium专题】FAQ_浏览器_ChromeDriver版本导致报错
报错信息 Started ChromeDriver port=31984 version=23.0.1240.0 log=C:\workspace\test\chromedriver.log [063 ...
- Mayor's posters 线段树区间覆盖
题目链接 http://poj.org/problem?id=2528 Description The citizens of Bytetown, AB, could not stand that t ...