Что заставляет мой CSS Аккордеон не выпадать? - PullRequest
Новая
       11

Что заставляет мой CSS Аккордеон не выпадать?

0 голосов
/ 12 марта 2019

Я пытаюсь заставить аккордеон 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>

1 Ответ

0 голосов
/ 12 марта 2019

Проблема

У 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

...