如果菜单打开，则应用 css 规则答案

【问题标题】：Apply css rule if menu is open如果菜单打开，则应用 css 规则
【发布时间】：2019-07-27 05:38:20
【问题描述】：

如果菜单打开，我想更改汉堡图标的颜色。

我不是 100% 确定如何做到这一点？我假设您会检查“活动”类是否存在，然后如果它返回 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;
}

我会很感激任何人的解决方案。

【问题讨论】：

请同时添加css
点击事件去哪了？你不能注册/监听点击事件并使用在回调中传递的 event.target 来改变/添加类到 DOM 元素吗？你也在使用 jquery - 看起来有其他东西在点击时改变了类名。我想知道您是否可以编辑该代码 - 否则对您来说是个矮子 $('#hamburger').click(function(e) { $(e.target).toggleClass('open'); })跨度>
正如 Naga 所说，CSS 是关键。更改“汉堡包”上的悬停状态将允许您按照您在此处的描述对其进行修改。
只需在初始汉堡样式后添加.active { color: #yourcolor; }，一旦元素接收到活动类，它将获得新样式。
老实说我对 JS 不是很熟悉。我已将 css 添加到原始问题中

标签： javascript jquery css bootstrap-4

【解决方案1】：

从技术上讲，您可以使用 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');  
});

【讨论】：

感谢您的标记！你个传奇！我该如何为侧导航中的其他项目执行此操作，即关注我们？
哎呀。已编辑。
@JakeFeeley - 还有一个建议，将 transition: color 1.5s; 添加到 .follow-us 的 CSS 规则（或 .left-side.follow-us，因为您已经指定了这些规则） - 不是每个浏览器都会尊重它，但 Chrome会 - 可能还有其他版本的 transition 也适用于不同浏览器的颜色，但我在 Chrome 中验证了那个版本。如果您发现答案有用，请务必将其标记为正确答案，以便其他人可以找到它，这样就不会浪费时间解决已解决的问题。干杯！

【解决方案2】：

你并没有真正“执行”CSS。您只需根据存在的选择器设置应用样式的规则。现在看起来你的.active 类被应用到了一个与容纳汉堡包的容器不同的容器。如果您改为将其应用于当前应用位置和汉堡包的父级，那么您可以编写一个规则，在应用.active 时更改这两个内容。或者，您可以将.active 应用到多个位置，这意味着除了当前应用的位置之外，还可以将其应用到汉堡的父级。

【讨论】：