<!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. 关于CSS中的字体尺寸设置 em rem

    常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...

  2. 让几个横向排列的浮动子div居中显示的方法

    div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...

  3. OpenCV On Android环境配置最新&最全指南(Eclipse篇)

    简介 本教程是经过本人多次踩坑,并参考网上众多OpenCV On Android的配置教程总结而来,尽希望能帮助学习移动图像处理的朋友们少走弯路.这也是本人第一次在简书上发布文章,如有不足,希望各位d ...

  4. LFW Face Database下载

    http://vis-www.cs.umass.edu/lfw/ Download the database: All images as gzipped tar file (173MB, md5su ...

  5. MongoDB 索引 .explain("executionStats")

    MongoDB干货系列2-MongoDB执行计划分析详解(3) http://www.mongoing.com/eshu_explain3 MongoDB之使用explain和hint性能分析和优化 ...

  6. ios 获取app版本号

    let infoDictionary = Bundle.main.infoDictionary!let appversion = infoDictionary["CFBundleShortV ...

  7. mpu6050的驱动的加载和测试步骤

    mpu6050的使用方法: 1.接线方式: VCC,GND,SCL,SDA,正常接法,VCC接3.3v,主要说一下AD0引脚,用来表示地址 接低电平设备地址为0x68,接高电平表示0x69 2.设备接 ...

  8. php time()时间戳作为文件名产生文件同名的bug

    /*time()函数生成的文件名可能是相同的,因为如果php运行的过程如果足够快,time()函数调用的足够频繁,那么有可能time()生成的时间戳会相同,因为时间戳是以秒为单位,所以如果足够频繁有可 ...

  9. 基础篇十：模块介绍（--with-help_random_index_module）

    配置语法: 下面开始配置: cd /etc/nginx/conf.d/default.conf

  10. 31）PHP，对象的遍历

    对象的遍历: 对象也可以可以使用foreach语句进行便利,有两点注意: 1,只能便利属性.(所以,这个就解决了,为啥之前的数据库类,我只是看到了一些属性名字,而没有得到我的属性值) 2,只能便利“看 ...