我正在尝试使用继续按钮的 [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-expanded 为“true”时,“matexcerpt”设置为显示:无,然后当 aria-expanded 为“false”时,“matexcerpt”显示为:内联。如果可能的话,我想用 CSS 来做到这一点。感谢您的任何见解!
最佳答案
您可以使用 attribute selector
选择 aria-expanded
值(value)和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 是最佳选择。
关于css - 使用来自另一个元素的选择器定位一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55873922/