如果菜单打开，我想更改汉堡包图标的颜色。
我不是 100% 确定该怎么做？我假设您会检查“active”类是否存在，如果它返回 true，则执行 css 代码。
这是网站的链接:http://plc.fluxeddigitalclients.co.uk/
<body>
<div class="page-transition">
<div class="layer"></div>
<!-- end layer -->
</div>
<!-- end page-transition -->
<nav class="site-navigation">
<div class="layer"></div>
<!-- end layer -->
<div class="inner">
<ul data-splitting>
<li><a href="/">Maison</a> <small>Retour au début</small></li>
<li><a href="/">Le Tournoi</a> <small>A propos de l'événement</small></li>
<li><a href="studio.html">Les Joueurs</a> <small>All About Us</small> </li>
<li><a href="showcases.html">Le Site</a> <small>Our all projects</small> </li>
<li><a href="blog.html">Media</a> <small>Recent posts</small> </li>
<li><a href="contact.html">Galerie</a> <small>Say hello</small> </li>
<li><a href="contact.html">Pro AM</a> <small>Say hello</small> </li>
<li><a href="contact.html">Partenaires</a> <small>Say hello</small> </li>
<li><a href="/contact">Pro AM</a> <small>Contact</small> </li>
</ul>
</div>
<!-- end inner -->
</nav>
<!-- end site-navigation -->
<div class="social-media">
<div class="layer"> </div>
<!-- end layer -->
<div class="inner">
<h5>Social Share </h5>
<ul>
<li><a href="index.html#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="index.html#"><i class="fab fa-twitter"></i></a></li>
<li><a href="index.html#"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="index.html#"><i class="fab fa-google-plus-g"></i></a></li>
<li><a href="index.html#"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
</div>
<!-- end social-media -->
<div class="all-cases">
<div class="layer"> </div>
<!-- end layer -->
<div class="inner">
<ul>
<li><a href="index.html#">Darkness</a></li>
<li><a href="index.html#">Goddes</a></li>
<li><a href="index.html#">Employee</a></li>
<li><a href="index.html#">Berry</a></li>
<li><a href="index.html#">Roosters</a></li>
<li><a href="index.html#">Primero</a></li>
</ul>
</div>
<!-- end inner -->
</div>
<!-- end all-cases -->
<main>
<aside class="left-side">
<div class="logo"> <a href="index.html"><img src="/themes/paris-legends-championship/assets/images/branding/paris-legends-icon.png" alt="Image"></a> </div>
<!-- end logo -->
<div class="hamburger" id="hamburger">
<div class="hamburger__line hamburger__line--01">
<div class="hamburger__line-in hamburger__line-in--01"></div>
</div>
<div class="hamburger__line hamburger__line--02">
<div class="hamburger__line-in hamburger__line-in--02"></div>
</div>
<div class="hamburger__line hamburger__line--03">
<div class="hamburger__line-in hamburger__line-in--03"></div>
</div>
<div class="hamburger__line hamburger__line--cross01">
<div class="hamburger__line-in hamburger__line-in--cross01"></div>
</div>
<div class="hamburger__line hamburger__line--cross02">
<div class="hamburger__line-in hamburger__line-in--cross02"></div>
</div>
</div>
<!-- end hamburger -->
<div class="follow-us"> FOLLOW US </div>
<!-- end follow-us -->
<div class="equalizer">
<a href="" class="jf__link" target="_blank">
<img src="/themes/paris-legends-championship/assets/images/jf.png" class="img-fluid jf__link--img" alt="">
</a>
</div>
<!-- end equalizer -->
</aside>
<!-- end left-side -->
<div class="all-cases-link"> <span>Leaderboard</span> <b><i class="fa fa-table" aria-hidden="true"></i></b> </div>
<!-- end all-cases-link -->
这是当前的CSS
.hamburger__line-in::after, .hamburger__line-in::before {
width: 60px;
height: 2px;
content: '';
display: block;
position: absolute;
top: 0;
background-color: #fff;
}
我想把它改成
.hamburger__line-in::after, .hamburger__line-in::before {
width: 60px;
height: 2px;
content: '';
display: block;
position: absolute;
top: 0;
background-color: #C1A473;
}
我将不胜感激任何人的解决方案。
最佳答案
从技术上讲，您可以使用 jQuery 或仅使用 JS 来更改 CSS 属性，或者，由于已经有一个基于打开/关闭切换的类，您可以仅使用纯 CSS 为基于该类的子元素设置样式(您可能想要也可以处理状态，例如悬停):
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross01 *::after,
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross02 *::after {
background-color: #122e1A;
}
测试，它似乎与 ::before 一起工作得更好和 ::after :
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross01 *::before,
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross02 *::before,
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross01 *::after,
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross02 *::after {
background-color: #122e1A;
}
编辑:漂亮的深绿色比纯红色更适合网站。
对于“follow-us”链接，我一开始什至没有看到(使用 Ad Block Plus)，它更适合 jQuery，因为它没有任何祖先，当菜单是打开。为此，您可以定义一个 CSS 类来确定它何时处于事件状态:
.follow-us.active {
color: #C1A473;
}
并添加一个更改其事件类的快速点击监听器(将其放在正文的末尾，在 <script></script> 中，就在 </body> 标记之前):
$('.hamburger').click(function() {
$('.follow-us').toggleClass('active');
});
关于javascript - 如果菜单打开则应用 css 规则，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57226985/