javascript - 使用 CSS 单击 + 图标后自动折叠 Accordion 样式选项卡

Question

我已经使用以下 CSS 代码在我的 Shopify 网站上实现了一个 Accordion 选项卡样式布局:

.so-tab {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 25px 0;
}

.so-tab label {
  position: relative;
  display: block;
  padding: 0 25px 0 0;
  margin-bottom: 15px;
  line-height: normal;
  cursor: pointer;
  font-weight: bold;
}

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

.so-tab-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s;
}


/* :checked */

.so-tab input:checked~.so-tab-content {
  max-height: none;
}


/* Icon */

.so-tab label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}

.so-tab input[type=checkbox]+label::after {
  content: "+";
}

.so-tab input[type=radio]+label::after {
  content: "+";
}

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

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

<div class="so-accordion-wrapper">


  <div class="so-tab"><input id="so-tab-1" type="radio" name="tabs"> <label for="so-tab-1">FEATURES</label>
    <div class="so-tab-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>


  <div class="so-tab"><input id="so-tab-2" type="radio" name="tabs"> <label for="so-tab-2">DESCRIPTION</label>
    <div class="so-tab-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>


  <div class="so-tab"><input id="so-tab-3" type="radio" name="tabs"> <label for="so-tab-3">SPECS</label>
    <div class="so-tab-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>


  <div class="so-tab"><input id="so-tab-4" type="radio" name="tabs"> <label for="so-tab-4">DETAILS</label>
    <div class="so-tab-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>



</div>

除了要折叠打开的选项卡必须单击不同选项卡的 + 图标外，它运行良好。在选项卡已打开后，无法仅通过再次单击 + 图标来折叠打开的选项卡。我想在我的代码中实现这个功能。请记住，我还想保留一次只打开一个选项卡的当前功能(因此，如果用户单击“功能”选项卡，然后单击“描述”，则“功能”选项卡必须自动关闭)

请注意，我正在寻找一个纯粹的 CSS 解决方案(如果单独使用 CSS 无法实现这一点，我会接受 JS 的一些东西，但它并不理想)

谢谢!

Answer 1

只需使用复选框而不是 radio 输入。

// Uncheck others
var inputs = document.querySelectorAll(".so-accordion-wrapper input[type=checkbox]");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("click", function(e) {
    var others = document.querySelectorAll(".so-accordion-wrapper input[type=checkbox]:not(#" + e.target.id + ")");
    for (var j = 0; j < others.length; j++) {
      others[j].checked = false;
    }
  });
}

.so-tab {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 25px 0;
}

.so-tab label {
  position: relative;
  display: block;
  padding: 0 25px 0 0;
  margin-bottom: 15px;
  line-height: normal;
  cursor: pointer;
  font-weight: bold;
}

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

.so-tab-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s;
}


/* :checked */

.so-tab input:checked~.so-tab-content {
  max-height: none;
}


/* Icon */

.so-tab label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}

.so-tab input[type=checkbox]+label::after {
  content: "+";
}

.so-tab input[type=radio]+label::after {
  content: "+";
}

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

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

<div class="so-accordion-wrapper">
  <div class="so-tab"><input id="so-tab-1" type="checkbox" name="tabs"> <label for="so-tab-1">FEATURES</label>
    <div class="so-tab-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>


  <div class="so-tab"><input id="so-tab-2" type="checkbox" name="tabs"> <label for="so-tab-2">DESCRIPTION</label>
    <div class="so-tab-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>


  <div class="so-tab"><input id="so-tab-3" type="checkbox" name="tabs"> <label for="so-tab-3">SPECS</label>
    <div class="so-tab-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>


  <div class="so-tab"><input id="so-tab-4" type="checkbox" name="tabs"> <label for="so-tab-4">DETAILS</label>
    <div class="so-tab-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>
</div>