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> & ...
随机推荐
- 【模板】倍增LCA [2017年5月计划 清北学堂51精英班 Day3]
P3379 [模板]最近公共祖先(LCA) 题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点个数.询 ...
- git命令移动文件夹到另一文件夹
- c++新特性实验(1)预处理
1.参考资料 1.1 C++ C++17 标准文档(正式) : https://www.iso.org/standard/68564.html C++ 标准文档(草案) : ht ...
- 一位AI研究员+区块链创业者的终极展望：AI DAO将统治世界
一位AI研究员+区块链创业者的终极展望:AI DAO将统治世界 [日期:2017-01-09] 来源:infoq.com 作者:杨赛 [字体:大 中 小] Trent McConaghy是一位资深的 ...
- Spring_事务
事务管理: 用来确保数据的完整性和一致性 事务就是一系列的动作,它们被当做一个单独的工作单元.这些动作要么全部完成,要么全部不起作用 事务的四个关键属性 原子性 一致性 隔离性 持久性 Spring两 ...
- 转搞定python多线程和多进程
转自https://www.cnblogs.com/whatisfantasy/p/6440585.html 1 概念梳理: 1.1 线程 1.1.1 什么是线程 线程是操作系统能够进行运算调度的最小 ...
- django1.11启动错误
错误信息: 复制代码 Unhandled exception in thread started by <function check_errors..wrapper at 0x10f03b8c ...
- C/C++中运算符优先级汇总
编程语言C运算符优先级 优先级1: ( ).[ ].->. ． 含义:圆括号.下标运算符.指向结构体成员运算符.结构体成员运算符 优先级2:!.~.++.――.-.(类型).*.&.si ...
- kubernetes1.4新特性：支持两种新的卷插件
背景介绍 在Kubernetes中卷的作用在于提供给POD持久化存储,这些持久化存储可以挂载到POD中的容器上,进而给容器提供持久化存储. 从图中可以看到结构体PodSpec有个属性是Volumes, ...
- oracle限制一个用户空闲时间
alter system set resource_limit = true; create profile idletime limit idle_time 3; alter user outln ...