css - 针对 CSS 中的特定元素?
问题描述
大家早上好,
我无法使用共享相同 div 父级的 a[aria-expanded=true] 来定位 .fa-caret-down 或 up(在 ai 和 span 内),你知道该怎么做吗?
我尝试使用选择器〜,或者移动 fa-caret-up(并成功),但你在这里真的很好,所以如果你能找到解决方案,这里是一个简单的代码版本。
谢谢 !
<style>
a[aria-expanded="true"] .fa-caret-up {
display: none;
}
a[aria-expanded="false"] .fa-caret-down {
display: none;
}
</style>
<div class="container-fluid d-flex justify-content-center">
<div class="row">
<div class="col-lg-4 col-md-6 col-12 pb-5">
<h4 class="text-center">eCampus</h4>
<div class="d-flex justify-content-between align-items-center">
<a href="#" data-toggle="collapse" data-target="#footer_ups" aria-expanded="false" aria-controls="footer_ups">
<span class="flex-grow-1 mr-5"><i class="fa fa-chevron-right pr-2"></i>Université Paris-Saclay</span>
</a>
<span class="badge badge-primary badge-pill">7 <i class="fa fa-caret-down"></i><i class="fa fa-caret-up"></i></span>
</div>
<div id="footer_ups" class="collapse pl-3" aria-labelledby="Établissements de l'Université Paris-Saclay">
<ul class="list-unstyled">
<li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.universite-paris-saclay.fr" alt="Site internet de l'Université Paris-Saclay" target="_blank">UPSaclay</a></li>
<li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.univ-evry.fr" alt="Site internet de l'Université d'Évry Val d’Essonne" target="_blank">UEVE</a></li>
<li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.uvsq.fr" alt="Site internet de l'université de Versailles-Saint-Quentin-en-Yvelines" target="_blank">UVSQ</a></li>
<li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.centralesupelec.fr" alt="Site internet de Centrale Supélec" target="_blank">Centrale Supéle</a></li>
<li><i class="fa fa-angle-right pr-2"></i> <a href="https://ens-paris-saclay.fr" alt="Site internet de l'École Normale Supérieure" target="_blank">École Normale Supérieure</a></li>
<li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.institutoptique.fr" alt="Site internet de l'Institut d'Optique Graduate School" target="_blank">Institut d'Optique</a></li>
<li><i class="fa fa-angle-right pr-2"></i> <a href="http://www2.agroparistech.fr" alt="Site internet de AgroParisTech" target="_blank">AgroParisTech</a></li>
</ul>
</div>
<div class="d-flex justify-content-between align-items-center">
<a href="#" class="text-nowrap pr-5" data-toggle="collapse" data-target="#footer_ipp" aria-expanded="false" aria-controls="footer_ipp">
<span><i class="fa fa-chevron-right pr-2"></i>Institut Polytechnique de Paris</span>
</a>
<span class="badge badge-primary badge-pill">4 <i class="footer_ipp_glyph fa fa-caret-down"></i></span>
</div>
<div id="footer_ipp" class="collapse pl-3" aria-labelledby="Établissements de l'Institut Polytechnique de Paris">
<ul class="list-unstyled">
<li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.ensta-paris.fr" alt="Site internet de ENSTA Paris" target="_blank">ENSTA</a></li>
<li><i class="fa fa-angle-right pr-2"></i> <a href="http://www-instn.cea.fr" alt="Site internet de l'Institut national des sciences et techniques nucléaires" target="_blank">INSTN</a></li>
<li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.telecom-paris.fr" alt="Site internet de Télécom Paris" target="_blank">Télécom Paris</a></li>
<li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.telecom-evolution.fr" alt="Site internet de Télécom Evolution" target="_blank">Télécom Evolution</a></li>
</ul>
</div>
<br />
<i class="fa fa-chevron-right pr-2"></i><a href="https://www.universite-paris-saclay.fr/collaborations/international/loffre-de-lalliance-eugloh-pour-les-etudiants" target="_blank">Alliance EUGLOH pour les étudiants</a>
</div>
<div class="col-lg-4 col-md-6 col-12 pb-4">
<h4 class="text-center">Aide et Informations légales</h4>
<ul class="list-unstyled">
<li><i class="fa fa-chevron-right pr-2"></i><a href="https://multiweb2.univ-evry.fr/SupportEcampus/">Problèmes de connexion</a></li>
<li><i class="fa fa-chevron-right pr-2"></i><a href="">Aide et accessibilité</a></li>
<li> <li>
<li><i class="fa fa-chevron-right pr-2"></i><a href="">Conditions générales d'utilisation</a></li>
<li><i class="fa fa-chevron-right pr-2"></i><a href="">Crédits</a></li>
<li><i class="fa fa-chevron-right pr-2"></i><a href="">Mentions légales</a></li>
<li><i class="fa fa-chevron-right pr-2"></i><a href="/admin/tool/dataprivacy/summary.php">Politique de confidentialité</a></li>
<li> <li>
<li><i class="fa fa-chevron-right pr-2"></i><a href="https://www.openlms.net/open-lms-mobile-app/?utm_source=9rgh0ncHTl1wJMQhZbEpm5EfZrdmgA1Dmoodle20gm.mrooms.net&utm_campaign=mobilelink_admin" target="_blank">Obtenir l'app mobile</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-12 text-center">
<h4 class="text-center">Suivez-nous</h4>
<a href="https://www.facebook.com/UParisSaclay" alt="Facebook de l'Université Paris-Saclay" target="_blank"><i class="fa fa-facebook-square fa-3x mr-3"></i></a>
<a href="https://twitter.com/UnivParisSaclay" alt="Twitter de l'Université Paris-Saclay" target="_blank"><i class="fa fa-twitter-square fa-3x mr-3"></i></a>
<a href="https://www.linkedin.com/school/universit%C3%A9-paris-saclay/" alt="LinkedIn de l'Université Paris-Saclay" target="_blank"><i class="fa fa-linkedin-square fa-3x mr-3"></i></a>
<a href="https://www.instagram.com/universite_paris_saclay/" alt="Instagram de l'Université Paris-Saclay" target="_blank"><i class="fa fa-instagram fa-3x"></i></a>
</div>
</div>
</div>
解决方案
如果你想制作插入符号上下动画,你可以使用很少JS
const caret = document.querySelector('.caret');
caret.addEventListener('click', (e) => {
e.preventDefault();
caret.classList.toggle('collapsed');
if (caret.classList.contains('collapsed')) {
caret.setAttribute("aria-expanded", "true");
} else {
caret.setAttribute("aria-expanded", "false");
}
console.log(caret.getAttribute('aria-expanded'))
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: grid;
place-items: center;
}
.caret {
width: 70px;
height: 70px;
display: grid;
place-items: center;
border-radius: 0.25rem;
border: 1px solid #e5e5e5;
}
.caret svg {
width: 64px;
height: 64px;
transition: transform 250ms ease;
}
.caret.collapsed svg {
transform: rotate(180deg);
}
<a href="#" class="caret" aria-expanded="false">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="m11.998 17 7-8h-14z"></path>
</svg>
</a>
推荐阅读
- html - 没有scss的动态css值
- python - Telebot:如何从列表中创建按钮并通过按下按钮从列表中删除
- jmeter - JMeter javax.net.ssl.SSLHandshakeException:握手期间远程主机关闭连接负载测试
- c# - 我如何在线程内运行等待
- cloudkit - CloudKit 字节到字符串数组
- list - 如何在我的 SwiftUI 列表中通过按钮或点击手势选择项目并将其转移到另一个视图
- c++ - 在 g++ 中编译 C 文件和 C++ 文件
- flutter - Flutter - 在 Listview 中嵌套 ListView.builder
- android - 编辑文本获得焦点时从编辑文本中删除文本
- php - 无法在 PHP 中捕获 BadMethodCallException