<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {padding: ;margin: ;}
ul { list-style-type: none;} .parentWrap {
width: 200px;
text-align:center; } .menuGroup {
border:1px solid #;
background-color:#e0ecff;
} .groupTitle {
display:block;
height:20px;
line-height:20px;
font-size: 16px;
border-bottom:1px solid #ccc;
cursor:pointer;
} .menuGroup > div {
height: 200px;
background-color:#fff;
display:none;
} </style>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function () {
//需求:鼠标点击span,让他下面的div显示出来。让其他的div隐藏。
$(".parentWrap span").click(function () {
// $(this).next().show();
// //让其他的隐藏
// //点击的span的父亲li,的所有的兄弟元素li,的孩子元素div全部隐藏。
// $(this).parent("li").siblings("li").children("div").hide();
//连式编程
$(this).next().show().parent("li").siblings("li").find("div").hide(); });
})
</script>
</head>
<body>
<ul class="parentWrap">
<li class="menuGroup">
<span class="groupTitle">标题1</span>
<div>我是弹出来的div1</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题2</span>
<div>我是弹出来的div2</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题3</span>
<div>我是弹出来的div3</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题4</span>
<div>我是弹出来的div4</div>
</li>
</ul>
</body>
</html>

jquery版手风琴效果的更多相关文章

  1. 基于jquery横向手风琴效果

    基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash&quo ...

  2. jquery横向手风琴效果

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

  3. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

  4. jquery横向手风琴效果2

    <!doctype html> <html> <head> <meta charset="utf-8"> <script ty ...

  5. jquery实现手风琴效果

    html----accordion.html <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. jQuery做出手风琴效果

    今天学到JQuery中的遍历-siblings,便手痒做了个手风琴的动态效果,有一点收获,分享给大家.mouseout的时候一定要记得opacity必须设置,不然li的opacity会保持mousem ...

  7. Jquery版放大镜效果

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

  8. jQuery插件实例五:手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

  9. jQuery插件实例四:手风琴效果[无动画版]

    手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是 ...

随机推荐

  1. wu2198:难得的波段抄底机会

    很好的波段抄底机会 个人浅见看,目前染料股跌出的机会明显,养殖股波段机会明显,芯片.半导体.集成电路.北导.软件.国产操作系统等科技股短线机会不错.另外,大盘指数2856/2806区域的波段操作机会不 ...

  2. centos 通用开发工具及库安装 有了它不用愁了

    通用开发工具及库:# yum groupinstall "Development Tools" "Development Libraries"

  3. python_9_for

    #1 for i in range(10):#默认从0开始,步长为1 print("loop",i) #2 for i in range(0,10,1):#步长为1 print(& ...

  4. Python判断一个数是否为小数

    一.判断一个数是否为小数 1.有且仅有一个小数点 2.小数点的左边可能为正数或负数 3.小数点的右边为正数 二.实现代码 def is_float(str): if str.count('.') == ...

  5. 通过cmd查看环境变量名对应的环境变量值

    在VS环境中通常要添加路径,不过基本都是按照往上提供的方法添加变量名形如:$(VC_IncludePath),但是如何通过cmd命令找到真正的路径呢 未完待续……

  6. 安装CentOS6.9虚拟机

    安装CentOS6.9 之前在学习项目时,都是用的按键好的虚拟机.这次自己也尝试搭建一下.(虽然也是google的) 首先大部分过程都是参考https://blog.csdn.net/pengpeng ...

  7. java基础面试题:说说&和&&的区别

    &与&&都是逻辑与 不同的是&左右两边的判断都要进行,而&&是短路与,当&&左边条件为假则不用再判断右边条件,所以效率更高 例如,对于i ...

  8. HTML5中最看重的理念“语义化”相比HTML有什么区别?

    这里搜集整理了一些语义化标签方面的问题和解答,以供大家参考. 语义化这个概念应该说是伴着HTML5应运而生,那么什么是HTML5中所谓的语义化? 简单来说就是:描述内容的含义(meaning) 比如说 ...

  9. leetcode笔记(一)309. Best Time to Buy and Sell Stock with Cooldown

    题目描述 (原题目链接) Say you have an array for which the ith element is the price of a given stock on day i. ...

  10. oracle常用运维sql语句

    1.查询dblink语句 col owner for a20col db_link for a30col username for a20col host for a30set linesize 12 ...