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示例 | 分级菜单的更多相关文章

  1. JS及Dom示例 | 分级菜单折叠

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 基于react实现无限分级菜单

    在开发CMS(内容管理系统)系统时,一般都会用到一个侧边栏或者顶部的二级或者三级菜单,当点击或者鼠标悬浮时,菜单能够随之展开或收起. 本文纯粹为了练习一下react,因此我会在react环境下实现这么 ...

  3. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  4. jQuery Wheel 环形菜单插件5种效果演示

    很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...

  5. 11款样式新颖的 jQuery/CSS3 网页菜单

    今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...

  6. jquery 展开折叠菜单

    jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...

  7. 炫酷实用的jQuery插件 涵盖菜单、按钮、图片

    新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...

  8. jQuery弹性滑动导航菜单实现思路及代码

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...

  9. 打造简易可扩展的jQuery/CSS3 Tab菜单

    原文:打造简易可扩展的jQuery/CSS3 Tab菜单 今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单,这款Tab菜单在切换时也有滑块的效果,先来看看效果图: 由与Tab菜 ...

随机推荐

  1. vCenter Server Heartbeat

    1.简介 vCenter Server Heartbeat为VMware vCenter Server提供关键任务高可用性,保护虚拟基础架构免受硬件.网络.配置等的影响,基于Windows的服务,可为 ...

  2. Java内存模型(转载)

    本文章节: 1.JMM简介 2.堆和栈 3.本机内存 4.防止内存泄漏 1.JMM简介 i.内存模型概述 Java平台自动集成了线程以及多处理器技术,这种集成程度比Java以前诞生的计算机语言要厉害很 ...

  3. numpy数组与python的list互转,然后用json写入文件与c交互

    1.对于numpy的tofile方法,一个一维数组可以直接写成二进制形式,用c语言或者numpy.fromfile()可以读出来内容.而如果数组超过一维,tofile并不区分,也就是arr1=[1,2 ...

  4. redis整理の配置

    redis有一个很强大也很重要的配置文件redis.conf.此文件可以随服务启动,为服务配置各种不同场景所需的参数: daemonize: 默认情况下,redis 不是在后台运行的,如果需要在后台运 ...

  5. C# 同步锁 lock Monitor

    Lock关键字 C#提供lock关键字实现临界区,MSDN里给出的用法: Object thisLock = new Object();lock (thisLock){   // Critical c ...

  6. 7z文件格式及其源码的分析(三)

    上一篇在这里.  这是7z文件格式分析的第三篇, 相信有了前两篇的准备,你已经了解了7z源码的大致结构, 以及如何简单调试7z的源码了. 很多同学是不是迫不及待想要拔去7z的神秘外衣,看看究竟了. 好 ...

  7. Transaction And Lock--死锁错误号1205

    在TSQL中,如果需要判断当前错误是否是因为死锁引起,可以使用ERROR_NUMBER()=1205来判断在C#中,使用SQLException来捕获 SQLException.Number=1205 ...

  8. 从golang的垃圾回收说起(下篇)

    文章来自网易云社区 4 Golang垃圾回收的相关参数 4.1 触发GC gc触发的时机:2分钟或者内存占用达到一个阈值(当前堆内存占用是上次gc后对内存占用的两倍,当GOGC=100时)  # 表示 ...

  9. 【Selenium专题】FAQ_浏览器_ChromeDriver版本导致报错

    报错信息 Started ChromeDriver port=31984 version=23.0.1240.0 log=C:\workspace\test\chromedriver.log [063 ...

  10. Mayor's posters 线段树区间覆盖

    题目链接 http://poj.org/problem?id=2528 Description The citizens of Bytetown, AB, could not stand that t ...