jq实现简单手风琴效果
文章地址：https://www.cnblogs.com/sandraryan/
利用slideUp slideDown动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul li {
background-color: lightblue;
border: 1px solid white;
width: 200px;
text-align: center;
}
span {
display: block;
color: white;
line-height: 26px;
}
ul {
list-style: none;
}
.box div {
height: 150px;
width: 200px;
background-color: #fff;
display: none;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<span>title 1</span>
<div>我是弹出来的div1</div>
</li>
<li>
<span>title 2</span>
<div>我是弹出来的div2</div>
</li>
<li>
<span>title 3</span>
<div>我是弹出来的div3</div>
</li>
<li>
<span>title 4</span>
<div>我是弹出来的div4</div>
</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$(function(){
// 每一个span注册点击事件
$('span').click(function(){
// 被点击的span的下一个元素（div）滑下去，同时span的父级（li）的相邻兄弟（其他li）划上去
// slideDown slideUp只会对显示/隐藏的元素起作用
$(this).next().slideDown().parent().siblings().children('div').slideUp();
});
}); </script>
</body>
</html>
最开始只有span会被显示在页面中，点击span会让当前span的相邻兄弟div出现，其他相邻的li执行相反操作（如果可以）
jq实现简单手风琴效果的更多相关文章
- jq实现多级手风琴效果
/*左侧*/ .wrapper, .main { height: 100%; z-index: 9 } .main { position: relative; } .main_L { width: 2 ...
- JS+JQ手风琴效果
最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...
- 超简单jQuary链式操作代码实现手风琴效果
超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...
- jQuery效果之简单的手风琴效果
实现效果如图所示: html结构: <div class="item_box box10"> <div class="item_box_wp" ...
- 基于css3实现手风琴效果
终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...
- jquery 图片手风琴效果
这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...
- 使用JS实现手风琴效果
想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
- Bootstrap手风琴效果
前面的话 Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果.当单击一个触发元素时,在另外一个可折叠区域进行显示或隐藏,再次单击时可以反转显示状态.经典的场景是多个折 ...
- js实现手风琴效果
之前在慕课网上有练习手风琴效果,但是老师使用jquery简简单单的两三行实现了,今天自己用js练习一下效果 <div id="divbox"> <ul> & ...
随机推荐
- python中操作json
1.导入json包 import json 2.打开json文档 fp = open(jsonpath) 3.读取json文件 data=json.load(fp) 4.获取json的值 data[' ...
- 云原生交付加速！容器镜像服务企业版支持 Helm Chart
2018 年 6 月,Helm 正式加入了 CNCF 孵化项目:2018 年 8 月,据 CNCF 的调研表明,有百分之六十八的开发者选择了 Helm 作为其应用包装方案:2019 年 6 月,阿里云 ...
- jmeter 通过csv data set config 设置参数化后，执行结果显示为<EOF>
通过csv data set config 设置参数化后,执行结果显示为<EOF>: 反复确认相应的参数的设置均没有问题,其中csv文件编码方式采用uft-8.在csv data set ...
- HDU 4006优先队列
//按照降序排列,而且队列中只保存k个元素 #include<stdio.h> #include<queue> using namespace std; int main(){ ...
- hack 记录
0.寻找信号强的wifi,对于隐藏ssid 的可通过嗅探 1.wifi密码:wifi万能钥匙.minidwep-gtk.aircrack-ng 2.对于绑定mac地址的安全设置,可通过对活动的客户端网 ...
- Python datetime模块的其他方法
- Linux C socket 基于 UDP
/************************************************************************* > File Name: serve ...
- 搭建直播服务器，使用nginx与nginx-rtmp-module搭建流媒体服务器；
现在,一起学习一下如何自己搭建一个流媒体服务器吧! 本次搭建流媒体使用的环境是centos 7.0+nginx: 让我们一起开始奇妙的流媒体之旅吧! 1.下载nginx-rtmp-module: ng ...
- 什么是PV UV
PV是网站分析的一个术语,用以衡量网站用户访问的网页的数量.对于广告主,PV值可预期它可以带来多少广告收入.一般来说,PV与来访者的数量成正比,但是PV并不直接决定页面的真实来访者数量,如同一个来访者 ...
- hdu3917 最大权闭合图
题意:有N个城市,M个公司.现在需要建立交通是获得的利益最大.如果2个公司A,B, A修的路为Xa->Ya,B的路为Xb->Yb,如果Ya==Xb,那么这2个公司有关系. 对于每个公司都有 ...