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> & ...
随机推荐
- tcpdump命令介绍
命令格式为:tcpdump [-nn] [-i 接口] [-w 储存档名] [-c 次数] [-Ae] [-qX] [-r 文件] [所欲捕获的数据内容] 参数: -nn,直接以 IP 及 Port ...
- NOIP模拟 7.01
水灾(sliker.cpp/c/pas) 1000MS 64MB 大雨应经下了几天雨,却还是没有停的样子.土豪CCY刚从外地赚完1e元回来,知道不久除了自己别墅,其他的地方都将会被洪水淹没. CCY ...
- git之操作准则
每天下班前合一次代码,每次合代码先pull 不要多人同时修改同一个文件,避免冲突 在每个人自己的分支进行开发,先合并到dev分支解决冲突,确认无冲突后再合并到master
- org.dom4j.Document 解析xml
1.Java代码 Document doc = DocumentHelper.parseText(xml); // Element rootE = doc.getRootElement(); List ...
- python 布尔值索引
- OSGi教程：Framework Namespaces Specification
此教程基于OSGi Core Release 7 OSGi命名空间规范 详细的教程上面的英文教程里面有详细说明. 我就记录一下自己看完之后的简单理解: OSGi的Namespace规范就是规定了你Ma ...
- 删除重复节点 Remove Duplicates from Sorted List
Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...
- nodeJs学习-17 博客案例
源码:智能社视频20节课件 const express=require('express'); const static=require('express-static'); const cookie ...
- 总结 ESP8266 RTOS 开发环境搭建
总结 ESP8266 RTOS 开发环境搭建 仔细看官方文档. 必须一步一步操作. 不要想当然,以为 make 就可以. 忽略编译警告,除非是错误. 工具链必须使用官方提供的. 多看看 Issues ...
- Leetcode746.Min Cost Climbing Stairs使用最小花费爬楼梯
数组的每个索引做为一个阶梯,第 i个阶梯对应着一个非负数的体力花费值 cost[i](索引从0开始). 每当你爬上一个阶梯你都要花费对应的体力花费值,然后你可以选择继续爬一个阶梯或者爬两个阶梯. 您需 ...