是什么原因导致我的CSS手风琴不下降？

Question

我试图让一个css手风琴下降，并使用无线电方法，但有问题让这个功能。理想情况下，我想用打开/关闭文本打开/关闭文本替换正在使用背景图像的箭头图标。任何有关我可能做错的信息都将不胜感激。

.ac-container input:checked + label,
.ac-container input:checked + label:hover{
    background: #c6e1ec;
    color: #3d7489;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    box-shadow: 
    0px 0px 0px 1px rgba(155,155,155,0.3), 
    0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
}
.ac-container input:checked + label:hover:after{
    background-image: url(../images/arrow_up.png);
}
.ac-container input{
    display: none;
}
.ac-container article{
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    transition: 
    height 0.3s ease-in-out, 
    box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
    transition: 
    height 0.5s ease-in-out, 
    box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small{
    height: auto;
}

<div class="chapters___2NT4M js-chapters">
<section id="ac-container table-of-contents" class="table_of_contents___2HR-W">
    <header class="table_of_contents__chapter_title___2W8SV">
        <input id="ac-1" name="accordion-1" type="checkbox" />
        <label for="ac-1"><h2 class="table_of_contents__chapter_heading___19HQO" tabindex="0">Navigate to..</h2></label>
    </header>

    <article class="ac-small">
    <ul class="table_of_contents__chapter_list___2gu-a" data-gtm-element="review_toc_list">
        <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#zener-diodes" data-gtm-element="review_toc_link">Zener Diodes</a></li>
        <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#bridge-rectifiers" data-gtm-element="review_toc_link">Bridge Rectifiers</a></li>
        <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#super-fast-recovery-rectifiers" data-gtm-element="review_toc_link">Super Fast Recovery Rectifiers</a></li>
        <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#obsoleted-eol-products" data-gtm-element="review_toc_link">Obsoleted/EOL Products</a></li>
        <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#cross-reference" data-gtm-element="review_toc_link">Cross Reference</a></li>
    </ul>
    </article>
</section>

Answer 1

问题

CSS有一个主要的弱点，即查询不能倒退或“向上”。我们来看看你的一些代码：

<header class="table_of_contents__chapter_title___2W8SV">. 
  <input id="ac-1" name="accordion-1" type="checkbox" />
  <label for="ac-1"><h2 class="table_of_contents__chapter_heading___19HQO" tabindex="0">Navigate to..</h2></label>
</header>

<article>
  ...
</article>

使用纯CSS手风琴，我们的想法是采用隐藏的checkbox:checked状态并隐藏/显示基于此的手风琴内容。这通常通过一般兄弟选择器（~）处理。

.ac-container input:checked ~ article { … }

与选择器一样强大，它无法爬出<header>并继续搜索。它从DOM级别向前看它来自它并且看不到section。

解

因此，要使其工作，请将隐藏的复选框元素至少移动到DOM树中的一个级别，就在<header>上方。您需要做的另一件事是将此类ac-container添加到您的父元素。

.ac-container input:checked+label,
.ac-container input:checked+label:hover {
  background: #c6e1ec;
  color: #3d7489;
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
  box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 0px 2px 2px rgba(0, 0, 0, 0.1);
}

.ac-container label:hover:after,
.ac-container input:checked+label:hover:after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  right: 13px;
  top: 7px;
}

.ac-container input:checked+label:hover:after {
  background-image: url(../images/arrow_up.png);
}

.ac-container input {
  display: none;
}

.ac-container article {
  background: rgba(255, 255, 255, 0.5);
  margin-top: -1px;
  overflow: hidden;
  height: 0px;
  position: relative;
  z-index: 10;
  transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}

.ac-container input:checked~article {
  transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3);
}

.ac-container input:checked~article.ac-small {
  height: auto;
}

<section id="ac-container table-of-contents" class="table_of_contents___2HR-W ac-container">
  <input id="ac-1" name="accordion-1" type="checkbox" />
  <header class="table_of_contents__chapter_title___2W8SV">
    <label for="ac-1"><h2 class="table_of_contents__chapter_heading___19HQO" tabindex="0">Navigate to..</h2></label>
  </header>

  <article class="ac-small">
    <ul class="table_of_contents__chapter_list___2gu-a" data-gtm-element="review_toc_list">
      <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#zener-diodes" data-gtm-element="review_toc_link">Zener Diodes</a></li>
      <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#bridge-rectifiers" data-gtm-element="review_toc_link">Bridge Rectifiers</a></li>
      <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#super-fast-recovery-rectifiers" data-gtm-element="review_toc_link">Super Fast Recovery Rectifiers</a></li>
      <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#obsoleted-eol-products" data-gtm-element="review_toc_link">Obsoleted/EOL Products</a></li>
      <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#cross-reference" data-gtm-element="review_toc_link">Cross Reference</a></li>
    </ul>
  </article>
</section>

jsFiddle