CSS 手风琴在点击时打开，但不会关闭！帮助将不胜感激

编程问答 2022-04-22

问题描述

我有一个纯 CSS 手风琴在我的网站上部分工作。它在点击时打开，但由于某种原因再次点击时它不会关闭。

我尝试了很多调整来尝试解决这个问题，但没有任何帮助，所以我很想知道这里是否有人可以为我解决这个问题。

The exact code I'm using is here on CodePen and pasted below.

.gohere-accordion {
    margin-top: 7px;
    margin-bottom: 7px;
    margin-left: 4px;
    margin-right: 15px;
        width: 99%;
        color: #484848;
}
.gohere-accordion input {
    display: none;
}
.gohere-Box {
    position: relative;
    background: white;
        height: 64px;
        transition: all .15s ease-in-out;
        color: #484848;
}
.gohere-Box::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    Box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,.12),0 2px 4px rgba(0,.24);
}
gohere-header.Box {
    background: #00BCD4;
        color: #484848;
    z-index: 100;
    cursor: initial;
    Box-shadow: 0 -1px 0 #e5e5e5,0 0 2px -2px rgba(0,0 2px 4px -4px rgba(0,.24);
}
gohere-header .gohere-Box-title {
    margin: 0;
    font-weight: normal;
    font-size: 16pt;
        color: #484848;
    cursor: initial;
}
.gohere-Box-title {
    width: calc(100% - 40px);
    height: 64px;
    line-height: 64px;
    padding: 0 20px;
    display: inline-block;
    cursor: pointer;
        color: #484848;
    -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
.gohere-Box-content {
    width: calc(100% - 40px);
    padding: 30px 20px;
    font-size: 11pt;
        color: #484848;
    color: rgba(0,.54);
    display: none;
}
.gohere-Box-close {
    position: absolute;
    height: 64px;
    width: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    display: none;
}
input:checked + .gohere-Box {
    height: auto;
    margin: 16px 0;
    Box-shadow: 0 0 6px rgba(0,.16),0 6px 12px rgba(0,.32);
}
input:checked + .gohere-Box .gohere-Box-title {
    border-bottom: 1px solid rgba(0,.18);
}
input:checked + .gohere-Box .gohere-Box-content,input:checked + .gohere-Box .gohere-Box-close {
    display: inline-block;
}
.arrows section .gohere-Box-title {
    padding-left: 44px;
    width: calc(100% - 64px);
}
.arrows section .gohere-Box-title:before {
    position: absolute;
    display: block;
    content: '\203a';
    font-size: 18pt;
    left: 20px;
    top: -2px;
    transition: transform .15s ease-in-out;
    color: rgba(0,.54);
}
input:checked + section.gohere-Box .gohere-Box-title:before {
    transform: rotate(90deg);
}
<nav class="gohere-accordion"><!-- THEN ONE OF THESE PER SINGLE ACCORdioN --><input id="cb1" name="gohere-accordion" type="radio" />
<section class="gohere-Box"><label class="gohere-Box-title" for="cb1">This is a frequently asked question - opens,but won't close!</label>

<div class="gohere-Box-content">Now it's open,how can I make it close on click?</div>
</section>
</nav>

解决方法

只需将 input 元素的 type 属性从 radio（无法取消点击）更改为 checkbox，如下所示：

.gohere-accordion {
  margin-top: 7px;
  margin-bottom: 7px;
  margin-left: 4px;
  margin-right: 15px;
  width: 99%;
  color: #484848;
}

.gohere-accordion input {
  display: none;
}

.gohere-box {
  position: relative;
  background: white;
  height: 64px;
  transition: all .15s ease-in-out;
  color: #484848;
}

.gohere-box::before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,.12),0 2px 4px rgba(0,.24);
}

gohere-header.box {
  background: #00BCD4;
  color: #484848;
  z-index: 100;
  cursor: initial;
  box-shadow: 0 -1px 0 #e5e5e5,0 0 2px -2px rgba(0,0 2px 4px -4px rgba(0,.24);
}

gohere-header .gohere-box-title {
  margin: 0;
  font-weight: normal;
  font-size: 16pt;
  color: #484848;
  cursor: initial;
}

.gohere-box-title {
  width: calc(100% - 40px);
  height: 64px;
  line-height: 64px;
  padding: 0 20px;
  display: inline-block;
  cursor: pointer;
  color: #484848;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.gohere-box-content {
  width: calc(100% - 40px);
  padding: 30px 20px;
  font-size: 11pt;
  color: #484848;
  color: rgba(0,.54);
  display: none;
}

.gohere-box-close {
  position: absolute;
  height: 64px;
  width: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  display: none;
}

input:checked+.gohere-box {
  height: auto;
  margin: 16px 0;
  box-shadow: 0 0 6px rgba(0,.16),0 6px 12px rgba(0,.32);
}

input:checked+.gohere-box .gohere-box-title {
  border-bottom: 1px solid rgba(0,.18);
}

input:checked+.gohere-box .gohere-box-content,input:checked+.gohere-box .gohere-box-close {
  display: inline-block;
}

.arrows section .gohere-box-title {
  padding-left: 44px;
  width: calc(100% - 64px);
}

.arrows section .gohere-box-title:before {
  position: absolute;
  display: block;
  content: '\203a';
  font-size: 18pt;
  left: 20px;
  top: -2px;
  transition: transform .15s ease-in-out;
  color: rgba(0,.54);
}

input:checked+section.gohere-box .gohere-box-title:before {
  transform: rotate(90deg);
}
<nav class="gohere-accordion">
  <!-- THEN ONE OF THESE PER SINGLE ACCORDION --><input id="cb1" name="gohere-accordion" type="checkbox" />
  <section class="gohere-box"><label class="gohere-box-title" for="cb1">This is a frequently asked question - opens,but won't close!</label>

    <div class="gohere-box-content">Now it's open,how can I make it close on click?</div>
  </section>
</nav>

accordionhtml