我有只使用HTML和CSS（没有JS）的手风琴。
对于台式机，我将鼠标悬停以展开，然后移开鼠标以关闭面板。
对于移动设备，我单击以展开， ，但是单击同一对象不会将其关闭 。我必须单击空白以关闭面板，这不直观。
问题：如何编写此代码，以便单击手风琴以关闭面板？... JS是唯一方法吗？
HTML
<div class="slider-containers">
<!--effect #1 -->
<div class="slider-container">
<div class="flexbox-slider flexbox-slider-1">
<div class="flexbox-slide">
<div class="img-overlay"><div class="start">ENGAGE<span id="accordion-expand">+</span></div>
<img src="https://images.pexels.com/photos/1464213/pexels-photo-1464213.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image" class="panel-img">
</div>
<div class="text-block">
<h3>Engage</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
<div class="slide-bottom"></div>
</div>
<div class="flexbox-slide">
<div class="img-overlay">
<div class="start">EDUCATE<span id="accordion-expand">+</span></div>
<img src="https://images.pexels.com/photos/1350615/pexels-photo-1350615.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image" class="panel-img">
</div>
<div class="text-block">
<h3>Educate</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<div class="img-overlay">
<div class="start">EMPOWER<span id="accordion-expand">+</span></div>
<img src="https://images.pexels.com/photos/1093913/pexels-photo-1093913.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image" class="panel-img">
</div>
<div class="text-block">
<h3>Empower</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
CSS
$slider-height: 500px;
$text-block-width: 400px;
$dark-font-color: #212121;
$accent-font-color: #CA9CE1;
$light-font-color: #fff;
$text-overlay-color: #000;
$text-overlay-opacity: 0.6;
$slide-overlay-color: #fff;
$slide-overlay-opacity: 0.6;
//transitions and mixins
//transitions mixin
@mixin transition-mix($property: all, $duration: 0.2s, $timing: linear, $delay: 0s) {
transition-property: $property;
transition-duration: $duration;
transition-timing-function: $timing;
transition-delay: $delay;
}
//position absolute mixin
@mixin position-absolute ($top: null, $left: null, $right: null, $bottom: null) {
position: absolute;
top: $top;
left: $left;
right: $right;
bottom: $bottom;
}
.container {
width: 1100px;
margin: 50px auto 0;
}
.link {
display: flex;
justify-content: center;
width: 800px;
margin: 30px auto 0;
a {
@include transition-mix;
display: flex;
align-items: center;
flex-shrink: 0;
margin-right: 40px;
color: inherit;
font: {
size: inherit;
}
text-decoration: none;
&:hover {
color: $accent-font-color;
}
&:last-child {
margin-right: 0;
}
i {
color: $accent-font-color;
margin-right: 9px;
font-size: 30px;
}
}
}
.slider-containers {
width: 100%;
margin: 60px ;
}
.slider-container {
margin-bottom: 60px;
h2 {
text-align: center;
}
}
.flexbox-slider {
margin-top: 50px;
}
.flexbox-slider {
display: flex;
width: 100%;
height: $slider-height;
visibility: hidden;
.flexbox-slide {
@include transition-mix($duration: .3s);
width: 33%;
height: 100%;
position: relative;
overflow: hidden;
cursor: pointer;
visibility: visible;
transform: skewx(-8deg);
//overlay
&:after {
@include position-absolute($top: 0, $left: 0);
content: "";
display: block;
width: 100%;
height: 100%;
background-color: rgba($slide-overlay-color, $slide-overlay-opacity);
z-index: 2;
opacity: 0;
}
img {
@include position-absolute($top: 50%, $left: 50%);
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
z-index: -1;
}
.text-block {
@include position-absolute($bottom: 30px, $left: 30px);
max-width: $text-block-width;
padding: 20px;
border-radius: 5px;
background-color: rgba($text-overlay-color, $text-overlay-opacity);
color: $light-font-color;
z-index: 4;
visibility: hidden;
opacity: 0;
h3 {
font: {
size: 20px;
weight: 700;
}
}
}
}
&:hover {
.flexbox-slide:hover {
flex-shrink: 0;
width: 80%;
}
}
}
/* effect */
.flexbox-slider.flexbox-slider-1 {
.flexbox-slide {
.text-block {
bottom: 60px;
}
}
&:hover {
.start {visibility:hidden}
.flexbox-slide:hover {
.text-block {
@include transition-mix($delay: .5s);
bottom: 30px;
opacity: 1;
visibility: visible;
}
}
}
}
.start {font-weight: bold; color: #fbaf17; font-size: 150%; z-index:1000; padding: 45% 20%;
}
img.panel-img {height:500px !important; }
.img-overlay {
width: 100%;
height: 100%;
background: rgba(51,85,153,.9);
}
.flexbox-slide {border-right: dashed 4px gold;}
.flexbox-slide:last-child {border-right: 0px}
#accordion-expand, .slide-bottom {visibility: hidden}
@media (max-width:960px) {
.flexbox-slider {
flex-direction: column;
height: 200px;
.flexbox-slide {
margin: auto;
width: 75%;
height: 200px !important;
transform: skewX(0deg);
}
.flexbox-slide {border-right: none;}
}
#accordion-expand {float:right; visibility: visible}
.start {margin: 0 20px; padding: 20px; border-bottom: solid 2px gold;}
}