<div class="accordion">
<div id="one" class="section">
<h3><a href="#one">折叠栏1</a></h3>
<div id="image1" class="image"><img src=""></div>
</div>
<div id="two" class="section">
<h3><a href="#two">折叠栏2</a></h3>
<div id="image2" class="image"><img src=""></div>
</div>
<div id="three" class="section">
<h3><a href="#three">折叠栏3</a></h3>
<div id="image3" class="image"><img src=""></div>
</div>
<div id="four" class="section">
<h3><a href="#four">折叠栏4</a></h3>
<div id="image4" class="image"><img src=""></div>
</div>
<div id="five" class="section">
<h3><a href="#five">折叠栏5</a></h3>
<div id="image5" class="image"><img src=""></div>
</div>
<div id="six" class="section">
<h3><a href="#six">折叠栏6</a></h3>
<div id="image6" class="image"><img src=""></div>
</div>
</div>

CSS3 利用  :target  伪类实现

.accordion h3+div{
height:;
overflow: hidden;/*超出部分隐藏*/
transition: height 0.3s ease-in;/*展开的一种特效,以0.3s慢慢飞入*/
} .accordion :target h3+div{
height: 300px;
overflow: auto;/*超过部分自动隐藏*/
}
 JS实现
function showSection(id) {
var images=document.getElementsByClassName("image");
for(var i=0;i<images.length;i++){
if(images[i].getAttribute("id")!=id){
images[i].style.display="none";
}else{
images[i].style.display="block";
}
}
} function imagesHidden() {
var images=document.getElementsByClassName("image");
for(var i=0;i<images.length;i++){
var id=images[i].getAttribute("id");
document.getElementById(id).style.display="none";
}
}
function addClick() {
var sections=document.getElementsByClassName("section");
for(var i=0;i<sections.length;i++){
sections[i].onclick=function () {
var showID=this.children[1].getAttribute("id");
showSection(showID);
}
}
}

CSS&JS两种方式实现手风琴式折叠菜单的更多相关文章

  1. 引入外部CSS的两种方式及区别

    1.CSS的两种引入方式 通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使 ...

  2. 日期选择器(Query+bootstrap和js两种方式)

    日期选择是在下拉列表中选择年.月.日,年显示前后的五年,12个月,日就是有30.31.29.28天的区别,随着月份的变而变 一.js方式的日期选择 (1)首先就是三个下拉列表了,点击年.月.日显示列表 ...

  3. WordPress引入css/js两种方法

    WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpr ...

  4. vue引入css的两种方式

    方案1.在main.js中引入方式    import '@/assets/css/reset.css' 方案2.在.vue文件的<style/>标签里面引入    @import &qu ...

  5. 引入css的两种方式

    摘自:https://www.cnblogs.com/gyjWEB/p/4831646.html 在HTML中引入css的其中的两个方法: 1.如果使用链接式,需要使用如下的语句引入外部css文件: ...

  6. 获取表单选中的值(利用php和js两种方式)

    php代码中获取表单中单选按钮的值: (单选按钮只能让我们选择一个,这里有一个“checked”属性,这是用来默认选取的,我们每次刷新我们的页面时就默认为这个值.) 例: <form name= ...

  7. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  8. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  9. js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言

    js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言 一.总结 一句话总结:实现按下组合键提交留言是通过给input加keydown事件,判断按键的键码来实现的. 1.如 ...

随机推荐

  1. 牛客JS编程大题(二)

    11.统计数组 arr 中值等于 item 的元素出现的次数 function count(arr, item) { var num = 0; for(var i = 0;i < arr.len ...

  2. GC垃圾回收机制,iOS内存管理。

    问题: MRC中通过调用静态方法创建的新对象,不再使用时需要对其发送release消息吗? 不需要,因为约定静态方法创建的对象会自动将其放入自动释放池,即已对其发送autorelease消息,因此不可 ...

  3. Eclipse 刚检出的项目 Build path 的时候提示 No action available

    问题: 从SVN检出来的项目发现无法进行build path,也不报错,任何类之间也无法关联(Ctrl+右键无法点进去). 原因: .classpath是Eclipse的工程文件,别人没有将工程的信息 ...

  4. Android开发工程师文集-相关控件的讲解,五大布局

    前言 大家好,给大家带来Android开发工程师文集-相关控件的讲解,五大布局的概述,希望你们喜欢 TextView控件 TextView控件有哪些属性: android:id->控件的id a ...

  5. Java学习笔记35(异常)

    代码在运行中发生的问题就是异常 java中把多种异常封装多个类,当程序出现问题时候,就会创建异常类对象并且抛出相关信息 异常体系: Throwable类是Java中所有错误或异常的父类 Throwab ...

  6. apache环境之困扰,Rewrite导致无法加载多个不同的.html文件

    又是一个项目,为访问多个纯静态html页面h5游戏页,能够做一些简单分享和跳转即可.原本是一个简单得不能的项目,但是却多生了事端. 我按照apache的惯例,将文件上传到服务器的DocumentRoo ...

  7. springboot知识点补充(一)

    测试配置 @RunWith(SpringRunner.class) @SpringBootTest @Configuration @ActiveProfiles("test") p ...

  8. 《机器学习实战(基于scikit-learn和TensorFlow)》第五章内容学习心得

    本章在讲支持向量机(Support Vector Machine). 支持向量机,一个功能强大的机器学习模型,能够执行线性或非线性数据的分类.回归甚至异常值检测的任务.它适用于中小型数据集的分类. 线 ...

  9. 【LeetCode】1. 两数之和

    题目 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标.你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样 ...

  10. odoo开发笔记 -- 进入后台调试模式

    ./odoo-bin shell -d test1 -c /home/odoo/odooshare/odoo.conf ./odoo-bin shell -d 数据库名 -c 指定配置文件