<!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>手风琴</title>
<style>
* {
margin: 0;
padding: 0;
}
 
ul li {
list-style: none;
text-align: center;
}
 
li {
width: 150px;
height: 30px;
line-height: 30px;
cursor: pointer;
border-bottom: 1px solid #fff;
}
 
li h3 {
border-bottom: 1px solid #fff;
}
 
.wrap {
width: 200px;
}
 
.wrap .subContent {
color: #fff;
background: #008b8b;
overflow: hidden;
transition: all 2s ease 2s;
}
 
.details li {
background: #333;
}
</style>
<script>
window.onload = function() {
function p(arg) {
console.log(arg);
}
let content = document.querySelector('.content'),
subContent = content.querySelectorAll('.subContent'),
details = content.querySelectorAll('.details');
function ss() {
for (let i = 0; i < subContent.length; i++) {
subContent[i].style.height = '30px';
(function(q) {
subContent[q].addEventListener('click', function(ev) {
var e = ev || window.event;
e.stopPropagation();
e.preventDefault();
ss();
detailsLi = details[i].querySelectorAll('li');
this.style.height = 30 * (detailsLi.length + 1) + (detailsLi.length) + 'px';
}, false);
})(i)
}
}
ss();
}
</script>
</head>
<body>
<div class="wrap">
<ul class="content">
<li class="subContent">
<h3>我是标题</h3>
<ul class="details">
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
</ul>
</li>
<li class="subContent">
<h3>我是标题1</h3>
<ul class="details">
<li>我是内容1</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
</ul>
</li>
<li class="subContent">
<h3>我是标题2</h3>
<ul class="details">
<li>我是内容2</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

js 实现手风琴的更多相关文章

  1. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

  2. JS+JQ手风琴效果

    最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...

  3. html、css、js实现手风琴图片滑动

    手风琴图片滑动是我最近学的一个图片的效果,感觉不错,分享给大家. 最终效果见 :http://gjhnstxu.me/squeezebox/demo.html 详细代码如下: html代码: < ...

  4. js实现手风琴效果

    之前在慕课网上有练习手风琴效果,但是老师使用jquery简简单单的两三行实现了,今天自己用js练习一下效果 <div id="divbox"> <ul> & ...

  5. js 特效 手风琴效果

    $(document).ready(function(){ //定义展开的块 var lastBlock = $('#a1'); //展开的块的宽度 var maxWidth = 406; //折叠的 ...

  6. bootstrap js插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  7. 《玩转Bootstrap（JS插件篇）》笔记

    导入JavaScript插件 不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入 <script src="js/bootstrap.min.js"> ...

  8. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  9. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-1导入JavaScript插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

随机推荐

  1. UML-交互图包含哪些图？

    猫比狗精明,但你无法让8只猫在雪地里拉雪橇---杰夫.瓦尔德斯 本章是重点. 1.总览 2.顺序图 1).类A具有doOne方法和类B的属性 2).doOne方法中调用类B的doTwo()和doThr ...

  2. 面向对象 part2 属性的特性

    6.1.1理解对象 创建自定义对象最简单的方式就是创建一个object实例.然后添加方法和实例 var person = new Object() person.name = "hi&quo ...

  3. DataStructureAndAlgorithm--第 K 个最大值

    设有一组 N 个数而要确定其中第 K 个最大者,我们称之为选择问题(selection problem). 该问题的一种解法就是将这 N 个数读进一个数组中,再通过某种简单的算法,比如冒泡排序法,以递 ...

  4. python模块——datetime

    datetime模块是python自带对时间的操作,其常用的四大类分别是date.time.datetime.timedelta.下面分别讲解下这四大类中常用的方法及其属性. date类 date类的 ...

  5. php安装swoole2.1.2

    准备环境: cos7.2  &   php 7.1.7 1.www.swoole.com找到对应版本2.使用git clone或则 wget 命令(下载后需解压)进行下载3.在swoole目录 ...

  6. [Python] 关于__init__.py

    当目录结构为下面这样└── utils/│ ├── __init__.py│ └── config.py├── test.py 每个文件夹下都有__init__.py,一个目录如果包含了__init_ ...

  7. Hibernate(四)--延迟加载(lazyload)

    hibernate中的延迟加载(lazyload)分属性的延迟加载和关系的延迟加载 属性的延迟加载: 当使用load的方式来获取对象的时候,只有访问了这个对象的属性,hibernate才会到数据库中进 ...

  8. RL78 定义常量变量在指定的地址方法

    若想定义的常量地址在远端寻址,定义section段时  如定义MCU_INFOR段  则段名为MCU_INFOR_f   后缀需要添加f,近端寻址添加n. 程序中定义常量 需要使用#pragma  指 ...

  9. 天融信(NAT)地址转换端口映射配置

    目的地址为公司的公网地址 服务:选择或者自己定义一个端口号,就是要映射到服务器上的那个端口号 目的地址转换为:服务器ip 目的端口转换为:选择定义的服务(端口号) 规则描述:随便写

  10. 文件操作符|-e|-M|-s|-A|_|-r -w $filename|stat|localtime|&|>>|<<

    TTY:终端是一种字符型设备,它有多种类型,通常使用tty 来简称各种类型的终端设备 #!/usr/bin/perl use strict; use warnings; print "exi ...