<!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. gff文件提取cds

    #!/usr/bin/perl use strict; use warnings; ########input######## ];my $cut = &cut($gff);my %cut = ...

  2. 使用hexo+GitHub搭建个人博客的心得（含教程）

    Author Email Yaoyao Liu yaoyaoliu@msn.com 前言 对于广大CS专业的学生和码农,找一个地方写博客,记录一些编程.配置环境.阅读论文的心得体会是一个很常见的习惯. ...

  3. 追踪tracking

    追踪 追踪部分的主要思路是在当前帧和(局部)地图之间寻找尽可能多的对应关系,来优化当前帧的位姿. 作者在追踪这部分主要用了几种模型:运动模型(Tracking with motion model).关 ...

  4. 工作小结：Base64注意事项、标签for属性

    Base64 场景1:后台保存的客户填写备注信息,前台无法正常展示 原因:无法正常展示的备注信息为客户直接从黑屏复制过来的信息,信息中包含有不可见的控制字符,回传至前台的json数据,浏览器无法正常解 ...

  5. FastReport 使用入门

    FastReport  是微软开发的一款快速报表工具,使用起来非常方便简单  最关键的是快捷. 下面介绍一下 Fastreport在项目中的使用. 下图为其中一个效果图 首先 打开FastReport ...

  6. 关于前端jquery的总结

    简介 jQuery是一个JavaScript库,特性丰富,包含若干对象和很多函数,可以代替传统DOM编程的操作方式和操作风格,通过对DOM  API.DOM事件的封装,提供了一套全新的API,这套全新 ...

  7. Unittest - Python 使用总结

    Unittest - Python 使用总结 批量执行 一.UnitTest TestSuite 控制用例执行的顺序 UnitTest 框架默认 main() 方法根据 ASCII 码的顺序加载测试用 ...

  8. BaseAdapter教程(1) 最简单地使用BaseAdapter

    Adapter就是适配器,而设计模式里也有Adapter Pattern. 而BaseAdapter就是设计模式里的思维,把一些不相关的东西放进去,经过适配器,最终都会出产同一样的东西. 就像Base ...

  9. JSP详细解析

    原文地址: http://www.cnblogs.com/rollenholt/archive/2011/07/04/2097376.html http://www.cnblogs.com/jy024 ...

  10. 用Kinect为听障人士架一座沟通的桥梁

    编者按:这是微软亚洲研究院和中国科学院共同进行的一个合作项目,希望通过使用Kinect来帮助提升手语的识别率,从而为听力受损的残障人士(以下简称听障人士)架起一座与外界沟通的桥梁. 文章译自:Digi ...