Question

我正在尝试放下一个CSS手风琴，并且正在使用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手风琴，其想法是采用隐藏的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

是什么导致我的CSS手风琴没有掉下来？

1 个答案:

问题

解决方案