javascript - 单击时更改字体真棒图标的颜色:CSS / JavaScript
问题描述
如果我在这里很愚蠢,请提前原谅我,但是当我使用 JavaScript 在我的网站上单击菜单以在顶部添加“活动”类时,我正在尝试将 3 个 Font Awesome 图标的颜色从白色更改为黑色“social-icon”的当前类,以便激活 CSS。
我正在使用一个名为“toggle”的 div 作为导航栏,目前只有第一个图标在单击时变为黑色。我尝试使用 querySelectorAll 来代替,但这不起作用,我还尝试将社交图标类移动到字体真棒图标类中,但又没有。我只是好奇我哪里出错了。
谢谢
JS
const menuToggle = document.querySelector('.toggle')
const showcase = document.querySelector('.showcase')
const socialToggle = document.querySelector('.social-icon')
menuToggle.addEventListener('click', function() {
menuToggle.classList.toggle('active')
showcase.classList.toggle('active')
socialToggle.classList.toggle('active')
})
CSS
.social {
position: fixed;
bottom: 18px;
right: 40px;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
.social li {
list-style: none;
}
.social-icon {
display: inline-block;
transform: scale(0.5);
margin-right: 25px;
transition: 0.5s;
font-size: 40px;
cursor: pointer;
}
.social-icon.active {
color: black;
}
HTML
<div class="toggle"></div>
<ul class="social">
<li class="social-icon"><i class="fab fa-facebook-f"></i></li>
<li class="social-icon"><i class="fab fa-instagram"></i></li>
<li class="social-icon"><i class="fab fa-tiktok"></i></li>
</ul>
解决方案
您可以使用querySelectorAll
获取包含所有图标的节点列表,然后对其进行迭代:
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
const socialToggle = document.querySelectorAll('.social-icon');
menuToggle.addEventListener('click', function() {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
socialToggle.forEach(function(el) {
el.classList.toggle('active');
});
})
推荐阅读
- r - R用户/自定义原语?
- c++ - 如何在 C++ 中的字符数组中用 0xF 填充半字节?
- mysql - 更改表中的数据类型 -mysql
- asp.net-mvc - 在部分视图下拉列表中未触发更改事件
- xml - 多个重复字段上的 MarkLogic TDE xpath
- c++ - 如果在取消引用之前我们不能在不进行类型转换的情况下访问值,那么 c++ 中的 void 指针有什么用?
- php - 获取不正确的密码
- php - Laravel 使用 ajax 验证文件最大大小
- turing-machines - 证明一个决定是不可判定的
- android - 由于任务 ':app:compileDebugKotlin' 执行失败,构建失败