html - 是什么导致我的 CSS Accordion 不下降？

Question

我试图让一个 css Accordion 下拉并使用 radio 方法，但在让它运行时遇到问题。理想情况下，我想用在打开和关闭时切换的打开/关闭文本替换背景图像中使用的箭头图标。任何关于我可能做错了什么的信息将不胜感激。

.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 Accordion ，想法是采用隐藏的 checkbox:checked基于此声明和隐藏/显示 Accordion 内容。这通常通过通用兄弟选择器 ( ~ ) 处理。

.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