@N56544

Как настроить корректное отображение иконок состояние «спойлера» для внутренних блоков?

Имеется несколько вложенных блоков спойлеров (details) с измененными иконками раскрытия. Но на данный момент при раскрытии верхнего меняются и иконки всех внутренних. Не смотря на то, что они находятся в свёрнутом состоянии.

Как это победить и настроить отображение в соответствии с текущим состоянием спойлера?

Код на jsfiddle: https://jsfiddle.net/su9ybkhe/

<details>
  <summary>СПОЙЛЕР 1</summary>
  <a href="">ссылка</a>
  <a href="">ссылка</a>
  <a href="">ссылка</a>
  
  <details>
  <summary>СПОЙЛЕР 2</summary>
  <a href="">ссылка</a>
  <a href="">ссылка</a>
  <a href="">ссылка</a>
  <a href="">ссылка</a>
  </details>
  
  <details>
    <summary>СПОЙЛЕР 3</summary>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
  </details>  
</details>


/* ИЗМЕНЕНИЕ МАРКЕРА */

details summary::-webkit-details-marker {
  display: none
}

details > summary {
  list-style: none;
}

details summary:before {
  content: '+';
  margin-right: 7px;
}

details[open] summary:before {
  content: '-';
}


/*-------------------------*/
a {
  display: block;
}
  • Вопрос задан
  • 18 просмотров
Решения вопроса 1
MrDecoy
@MrDecoy
Верставший фронтендер
Не жадничать с >
details > summary:before {}
details[open] > summary:before {}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы