<!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. Codeforces Round #555 (Div. 3) B. Long Number 【仔细读题】

    B. Long Number time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  2. 零相关|回归|相关|相关系数|回归解释相关|r判断相关性|相关系数的区间估计|数据类型|非线性回归

    零相关是什么? 零相关亦称“不相关”.相关的一种.两个变量的相关系数r=0时的相关.零相关表示两个变量非线性相关,这时两个变量可能相互独立,也可能曲线相关.对于正态变量,两个变量零相关与两个变量相互独 ...

  3. iOS Reactivecocoa（RAC）知其所以然（源码分析，一篇足以）

    前言 如今RAC大行其道,对其讲解的博客也多不胜数,稍微有点经验的估计也已经对这个爽到不要不要的框架运用自如了,真正沉下来研究其实现原理的估计也不在少数,这里仅仅是记录一下自己的分析理解,更是在写这篇 ...

  4. Python笔记_第三篇_面向对象_2.构造函数和析构函数(含self说明)

    1. 构造函数: 为什么要有构造函数? 打一个比方:类的创建就是好比你创建了好了一种格式的房间,你租给上一个住户的后,里面会对方很多“垃圾”和不规则的物品摆放.构造函数就是下一个住户再使用的时候进行物 ...

  5. 一种循环buffer结构

    最新数据循环在buffer[H] -> buffer[L] 放置,记录最新放置Index,对外接口获取数据时,进行两次数据拷贝,Index-H ,index-L 拷贝到数组里

  6. WebServerFactoryCustomizer set the port, address, error pages etc.

    package com.ioc; import org.springframework.boot.SpringApplication; import org.springframework.boot. ...

  7. 吴裕雄--天生自然 PYTHON3开发学习：多线程

    import _thread import time # 为线程定义一个函数 def print_time( threadName, delay): count = 0 while count < ...

  8. Docker容器化【Docker镜像与容器相关命令】

    # Docker 学习目标: 掌握Docker基础知识,能够理解Docker镜像与容器的概念 完成Docker安装与启动 掌握Docker镜像与容器相关命令 掌握Tomcat Nginx 等软件的常用 ...

  9. PAT甲级——1035 Password (20分)

    To prepare for PAT, the judge sometimes has to generate random passwords for the users. The problem ...

  10. Linux_打包文件

    将多个文件打包成一个大文件,用tar命令 tar是将多个文件前后连接在一起,tar并不对文件进行压缩 tar -cf  要创建的打包文件名(最后加上.tar)  要打包的文件/列表      c代表创 ...