是什么导致我的 CSS Accordion 不下拉？

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