<!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. 微服务项目开发学成在线_day03 CMS页面管理开发

    springboot引入mangodb依赖坐标:在spring-boot集成条件下,使用mongodb的DAO层开发. swagger查看接口文档,请求地址:http://localhost:3100 ...

  2. react-native屏幕适配

    写一个屏幕适配类文件AdapterUtil.js,这样避免每次进行单位换算 "use strict" import {Dimensions, StatusBar, Platform ...

  3. Linux文件共享的实现方式

    前两天跟老师去北京开了一个会议,好久没学习了,今天才回学校,其中的辛酸就不说了.来正文: 1.什么是文件共享 (1).文件共享就是同一个文件(同一个文件指的是同一个inode,同一个pathname) ...

  4. Centos7安装Xrdp远程桌面

    Xrdp是Microsoft远程桌面协议RDP的一个开源实现,它允许以图像方式控制远程系统. 测试环境 服务端: CentOS Linux release 7.7.1908 (Core) 客户端: W ...

  5. MySQL 基础知识梳理

    MySQL 的安装方式有多种,但是对于不同场景,会有最适合该场景的 MySQL 安装方式,下面就介绍一下 MySQL 常见的安装方法,包括 rpm 安装,yum 安装,通用二进制安装以及源码编译安装, ...

  6. 日期控件 My97DatePicker WdatePicker 日期格式

    WdatePicker()只显示日期 WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})显示日期和时间 WdatePicker({dateFmt:'yyyy-MM ...

  7. pycharm debug的操作

    ###################################### """ pycharm的debug按钮是右上角的一个小虫子, debug,要打断点,debu ...

  8. 关于Apache Commons-Lang3的使用

    在日常工作中,我们经常要使用到一些开源工具包,比如String,Date等等.有时候我们并不清楚有这些工具类的存在,造成在开发过程中重新实现导致时间浪费,且开发的代码质量不佳.而apache其实已经提 ...

  9. 如何使用css伪类，实现div左上角出现封面等提示信息

     HTML <div class="ui-cover-tip”><div> CSS .ui-cover-tip{ position: relative; width: ...

  10. idea生成serialVersionUID

    默认情况下Intellij IDEA不会提示继承了Serializable接口的类生成serialVersionUID的警告.如果需要生成serialVersionUID,就要在Preferences ...