纯 CSS 折叠手风琴 [英] Pure CSS Collapse Accordion

查看：31
本文介绍了纯 CSS 折叠手风琴的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个纯 CSS 的 CSS 折叠手风琴，它工作得很好.

我只有 1 个问题:现在如果用户点击任何标签:标签一，标签二，标签三，他不能再次点击标签关闭它，如果用户点击下一个标签，每个标签都可以关闭

我想让它成为可能，

示例:用户点击标签一打开，如果他再次点击这个标签将关闭，所有标签都一样.

js 小提琴:https://jsfiddle.net/11wunqqz/4/

/* Acordeon 样式 */.标签 {位置:相对；底边距:1px；宽度:100%；颜色:#fff;溢出:隐藏；}输入 {位置:绝对；不透明度:0；z-索引:-1；}标签 {位置:相对；显示:块；填充:0 0 0 1em；背景:#16a085；字体粗细:粗体；行高:3；光标:指针；}.蓝色标签 {背景:#2980b9；}.tab 内容{最大高度:0；溢出:隐藏；背景:#1abc9c；-webkit-transition:最大高度 .35s；-o-transition: 最大高度 .35s;过渡:最大高度 0.35s；}.blue .tab-content {背景:#3498db；}.tab 内容 p {边距:1em；}/* :检查 */输入:检查〜.tab-content {最大高度:10em；}/* 图标 */标签::之后{位置:绝对；右:0；顶部:0；显示:块；宽度:3em；高度:3em；行高:3；文本对齐:居中；-webkit-transition:所有 .35s；-o-transition:所有 .35 秒；过渡:所有 0.35 秒；}输入[类型=复选框] + 标签::after {内容:+"；}输入[type=radio] + 标签::after {内容:25BC"；}输入[类型=复选框]:选中+标签::之后{变换:旋转(315度)；}input[type=radio]:checked + label::after {变换:旋转X(180度)；}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><div class="wrapper"><div class="tab blue"><input id="tab-four" type="radio" name="tabs2"><label for="tab-four">标签一</label><div class="tab-content"><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Tenetur, Architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta moestias iure facere dolorum adipisci eum?Saepe, itaque.</p>

<div class="tab blue"><input id="tab-five" type="radio" name="tabs2"><label for="tab-five">标签二</label><div class="tab-content"><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Tenetur, Architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta moestias iure facere dolorum adipisci eum?Saepe, itaque.</p>

<div class="tab blue"><input id="tab-six" type="radio" name="tabs2"><label for="tab-six">标签三</label><div class="tab-content"><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Tenetur, Architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta moestias iure facere dolorum adipisci eum?Saepe, itaque.</p>

解决方案

当您将 type radio 更改为 type checkbox 时，它运行完美.https://jsfiddle.net/4xvsn17y/

/* Acordeon 样式 */.标签 {位置:相对；底边距:1px；宽度:100%；颜色:#fff;溢出:隐藏；}输入 {位置:绝对；不透明度:0；z-索引:-1；}标签 {位置:相对；显示:块；填充:0 0 0 1em；背景:#16a085；字体粗细:粗体；行高:3；光标:指针；}.蓝色标签 {背景:#2980b9；}.tab 内容{最大高度:0；溢出:隐藏；背景:#1abc9c；-webkit-transition:最大高度 .35s；-o-transition: 最大高度 .35s;过渡:最大高度 0.35s；}.blue .tab-content {背景:#3498db；}.tab 内容 p {边距:1em；}/* :检查 */输入:检查〜.tab-content {最大高度:10em；}/* 图标 */标签::之后{位置:绝对；右:0；顶部:0；显示:块；宽度:3em；高度:3em；行高:3；文本对齐:居中；-webkit-transition:所有 .35s；-o-transition:所有 .35 秒；过渡:所有 0.35 秒；}输入[类型=复选框] + 标签::after {内容:+"；}输入[type=radio] + 标签::after {内容:25BC"；}输入[类型=复选框]:选中+标签::之后{变换:旋转(315度)；}input[type=radio]:checked + label::after {变换:旋转X(180度)；}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><div class="wrapper"><div class="tab blue"><input id="tab-four" type="checkbox" name="tabs2"><label for="tab-four">标签一</label><div class="tab-content"><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Tenetur, Architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta moestias iure facere dolorum adipisci eum?Saepe, itaque.</p>

<div class="tab blue"><input id="tab-five" type="checkbox" name="tabs2"><label for="tab-five">标签二</label><div class="tab-content"><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Tenetur, Architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta moestias iure facere dolorum adipisci eum?Saepe, itaque.</p>

<div class="tab blue"><input id="tab-six" type="checkbox" name="tabs2"><label for="tab-six">标签三</label><div class="tab-content"><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Tenetur, Architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta moestias iure facere dolorum adipisci eum?Saepe, itaque.</p>

I have a CSS collapse accordion with just pure CSS, it is working perfect.

I have just 1 issue: right now if the user click in any label: Label One, Label Two, Label Three, he can't close it clicking in Label again, each label can just close if the user clicks in the next one

I would like make it possible,

example: the user click in Label One to open, if him click again this label will close and the same will all for all labels.

js fiddle: https://jsfiddle.net/11wunqqz/4/

/* Acordeon styles */

.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #fff;
  overflow: hidden;
}

input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  background: #16a085;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
}

.blue label {
  background: #2980b9;
}

.tab-content {
  max-height: 0;
  overflow: hidden;
  background: #1abc9c;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}

.blue .tab-content {
  background: #3498db;
}

.tab-content p {
  margin: 1em;
}


/* :checked */

input:checked ~ .tab-content {
  max-height: 10em;
}


/* Icon */

label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}

input[type=checkbox] + label::after {
  content: "+";
}

input[type=radio] + label::after {
  content: "25BC";
}

input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}

input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="wrapper">
  <div class="tab blue">
    <input id="tab-four" type="radio" name="tabs2">
    <label for="tab-four">Label One</label>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </div>
  <div class="tab blue">
    <input id="tab-five" type="radio" name="tabs2">
    <label for="tab-five">Label Two</label>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </div>
  <div class="tab blue">
    <input id="tab-six" type="radio" name="tabs2">
    <label for="tab-six">Label Three</label>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </div>
</div>

解决方案

It runs perfectly when u change type radio to type checkbox. https://jsfiddle.net/4xvsn17y/

/* Acordeon styles */

.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #fff;
  overflow: hidden;
}

input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  background: #16a085;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
}

.blue label {
  background: #2980b9;
}

.tab-content {
  max-height: 0;
  overflow: hidden;
  background: #1abc9c;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}

.blue .tab-content {
  background: #3498db;
}

.tab-content p {
  margin: 1em;
}


/* :checked */

input:checked ~ .tab-content {
  max-height: 10em;
}


/* Icon */

label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}

input[type=checkbox] + label::after {
  content: "+";
}

input[type=radio] + label::after {
  content: "25BC";
}

input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}

input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="wrapper">
  <div class="tab blue">
    <input id="tab-four" type="checkbox" name="tabs2">
    <label for="tab-four">Label One</label>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </div>
  <div class="tab blue">
    <input id="tab-five" type="checkbox" name="tabs2">
    <label for="tab-five">Label Two</label>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </div>
  <div class="tab blue">
    <input id="tab-six" type="checkbox" name="tabs2">
    <label for="tab-six">Label Three</label>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </div>
</div>

这篇关于纯 CSS 折叠手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆