如果我很愚蠢，请事先原谅我，但是当我使用JavaScript在我的网站上单击菜单时，尝试将3个Font Awesome图标的颜色从白色更改为黑色时，请原谅我当前类别的“ social-icon”，以便激活CSS。
我正在使用一个名为“ toggle”的div作为导航栏，当前单击该图标时，只有第一个图标变为黑色。我尝试使用querySelectorAll代替，但这不起作用，并且我还尝试将social-icon类移动到字体超棒的图标类中，但又不是很贵。我只是想知道我要去哪里错了。
谢谢
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');
});
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句