Question

我正在尝试使用进度按钮的[aria-expanded：true]将跨度设置为“ display：none”，但是我不知道是否可以用这种方式定位跨度。

我一直在尝试同级选择器，但我不知道如何使用它们。

<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扩展为“ true”时，“ matexcerpt”设置为display：none，然后当aria expanded为“ 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是最佳选择。

使用其他元素的选择器来定位元素

1 个答案: