为什么我的 CSS 手风琴不起作用？这里的初学者

问题描述

我对 CSS 非常陌生，因此如果我在这里遗漏了一些非常明显的东西，我深表歉意。

我找到了一些干净的 CSS 手风琴代码，我想将其用于我的网站。

我让它显示，但当我点击时，什么也没有发生。它打不开，我猜可能是缺少一些基本的东西，或者我的代码有点错误。

有人可以帮忙吗？我进行了修改，添加了一个代表打开和关闭的图标，我希望在左侧加上文本。

.gohere-accordion {
    /* Border */
    border: 1px solid rgba(0,0.3);
    border-bottom-color: transparent;
    border-radius: 4px;
}

.gohere-accordion__item {
    border-bottom: 1px solid rgba(0,0.3);
}

.gohere-accordion__header {
    /* Center the content horizontally */
    align-items: center;
    display: flex;

    cursor: pointer;
    padding: 16px;
}

.gohere-accordion__toggle {
    margin-right: 12px;
}

.gohere-accordion__title {
    /* Take remaining width */
    flex: 1;
}

.gohere-accordion__content {
    /* For not selected item */
    display: none;

    border-top: 1px solid rgba(0,0.3);
    padding: 16px;
}

.gohere-accordion__content--selected {
    /* For selected item */
    display: block;
}

.gohere-control-icon {
  fill: #154ae5;
  transition: .3s ease;
  pointer-events: none;
}

.gohere-control-icon-close {
  display: none;
}

details[open] .gohere-control-icon-close {
  display: initial;
  transition: .3s ease;
}

details[open] .gohere-control-icon-expand {
  display: none;
}

<!DOCTYPE html>
<html>
<head>
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>

</style>
</head>
<body>
<!-- Container -->
<div class="gohere-accordion"><!-- Each accordion item -->
    <div class="gohere-accordion__item"><!-- heading -->
        <div class="gohere-accordion__header"><!-- The toggle icon -->
            <div class="gohere-accordion__toggle">
                <svg class="gohere-control-icon gohere-control-icon-expand" height="24" role="presentation" width="24">
                    <use xlink:href="#expand-more" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                </svg> 
                <svg class="gohere-control-icon control-icon-close" height="24" role="presentation" width="24">
                    <use xlink:href="#close" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                </svg>
            </div>
            <!-- The title -->
            <div class="gohere-accordion__title">Question One</div>
         </div>
            <!-- The content -->
            <div class="gohere-accordion__content">Answer One</div>
      </div>
</div>

</body>
</html>

解决方法

您可以使用 JavaScript 实现简单的切换功能，以检查 display 对您想要的内容具有什么值，然后相应地进行设置。

let
  header = document.querySelector( '.gohere-accordion__header' ),content = document.querySelector( '.gohere-accordion__content' );

function accordionToggle() {
  if( content.style.display != 'block' ) {
    content.style.display = 'block';
  }
  else {
    content.style.display = 'none';
  }
}

header.addEventListener( 'click',accordionToggle );

.gohere-accordion {
    /* Border */
    border: 1px solid rgba(0,0.3);
    border-bottom-color: transparent;
    border-radius: 4px;
}

.gohere-accordion__item {
    border-bottom: 1px solid rgba(0,0.3);
}

.gohere-accordion__header {
    /* Center the content horizontally */
    align-items: center;
    display: flex;

    cursor: pointer;
    padding: 16px;
}

.gohere-accordion__toggle {
    margin-right: 12px;
}

.gohere-accordion__title {
    /* Take remaining width */
    flex: 1;
}

.gohere-accordion__content {
    /* For not selected item */
    display: none;

    border-top: 1px solid rgba(0,0.3);
    padding: 16px;
}

.gohere-accordion__content--selected {
    /* For selected item */
    display: block;
}

.gohere-control-icon {
  fill: #154ae5;
  transition: .3s ease;
  pointer-events: none;
}

.gohere-control-icon-close {
  display: none;
}

details[open] .gohere-control-icon-close {
  display: initial;
  transition: .3s ease;
}

details[open] .gohere-control-icon-expand {
  display: none;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>

</style>
</head>
<body>
<!-- Container -->
<div class="gohere-accordion"><!-- Each accordion item -->
    <div class="gohere-accordion__item"><!-- Heading -->
        <div class="gohere-accordion__header"><!-- The toggle icon -->
            <div class="gohere-accordion__toggle">
                <svg class="gohere-control-icon gohere-control-icon-expand" height="24" role="presentation" width="24">
                    <use xlink:href="#expand-more" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                </svg> 
                <svg class="gohere-control-icon control-icon-close" height="24" role="presentation" width="24">
                    <use xlink:href="#close" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                </svg>
            </div>
            <!-- The title -->
            <div class="gohere-accordion__title">Question One</div>
         </div>
            <!-- The content -->
            <div class="gohere-accordion__content">Answer One</div>
      </div>
</div>

</body>
</html>

accordion