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. HDU 1111 Secret Code (DFS)

    题目链接 题意 : 给你复数X的Xr和Xi,B的Br和Bi,让你求一个数列,使得X = a0 + a1B + a2B2 + ...+ anBn,X=Xr+i*Xi,B=Br+Bi*i : 思路 : 首 ...

  2. Generated by NetworkManager、ubuntu DNS设置丢失(network-manager造成的情况)

    方法一:去掉重启 方法二:卸载network-manager 实测网络不稳,经常掉线(kalinux2.0环境)

  3. 可排序的 COMB 类型 GUID

    最新代码在这儿:CombGuid.cs 首先这里不做GUID与整形作为主键的优劣之争,GUID自有它优势,但GUID本身是乱序的,会对索引的维护带来性能上的损耗,数据量越大越明显. COMB 类型 G ...

  4. 昨天发现的nginx默认不支持下划线引起angular-phonecat项目部分文件404问题

    今天发现原来确实是不存在这个文件... 因为我的Ubuntu的git没有安装,所以导致bower install时没有拉下来依赖包,因为bower是使用的git拉的包. 但是同时也搜到了nginx不支 ...

  5. Windowsform datagridview选中向父窗口传值

    Datagridview mouseclick事件 private void dataGridView1_MouseClick(object sender, MouseEventArgs e) { i ...

  6. C# 设置textedit只能输入英文数字下划线,并且只能以英文开头(正则表达式)

    this.textEdit1.Properties.Mask.EditMask = @"[a-zA-z][a-zA-Z0-9_]*";

  7. Cleare userprofile info

    $Site = Get-SPSite http://wtcsps99:27841 $ServiceContext = Get-SPServiceContext($Site) $ProfileManag ...

  8. “全栈2019”Java第十三章:基本数据类型

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  9. BeginEditorCommand的原理

    代码来源 :http://www.arch-pub.com/problem-about-CPropertyPage_10682271.html CWnd* pAcadWnd = CWnd::FromH ...

  10. [Flex] 组件Tree系列 —— 支持CheckBox组件

    主程序mxml: <?xml version="1.0" encoding="utf-8"?> <!--功能描述:支持CheckBox--&g ...