Ориентация на элемент с помощью селектора из другого элемента

Question

Я пытаюсь установить для диапазона «display: none», используя [aria-extended: true] исходящей кнопки, но я не знаю, смогу ли я настроить таргетинг таким образом.

Я пробовал родственные селекторы, но я не понимаю, как их использовать.

<h2>
<button class="btn btn-primary start" type="button" data-toggle="collapse" data-target="#projectID" aria-expanded="true" aria-controls="collapseExample">TITLE</button></h2>

<div class="projectmargin"><span class="matexcerpt"><?php the_excerpt(); ?></span>

<div class="collapse" id="project<?php the_ID(); ?>">
  <div class="card card-body">
  <span class="matexpanded"><?php the_content(); ?></a>

 </div>

То, что я хотел бы получить, это когда aria-extended "true" означает "matexcerpt"устанавливается для отображения: нет, а затем, когда aria-extended имеет значение «false», «matexcerpt» будет отображаться: inline.Я хотел бы сделать это с помощью CSS, если это возможно.Спасибо за понимание!

Answer 1

Вы можете использовать attribute selector, чтобы выбрать aria-expanded значение, и sibling, чтобы выбрать класс matexcerpt.

button[aria-expanded="true"] + .projectmargin .matexcerpt {
  display: none;
}

button[aria-expanded="false"] + .projectmargin .matexcerpt {
  display: block;
}

Из приведенного выше метода вы можете сделать с помощью CSS. Вы также можете сделать с JavaScript.

Это зависит от вашего значения aria-expanded. Если вы можете динамически изменять значение с помощью JavaScript, вам нужно использовать JavaScript для этого, но если у вас есть другой компонент для значений aria-expanded, CSS - лучший вариант.