个人中心
gpt4 book ai didi

javascript - 如果菜单打开则应用 css 规则

转载 作者：行者123 更新时间：2023-11-27 23:36:22 25 4
gpt4 key购买 nike

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

我不是 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/

25 4 0
文章推荐： javascript - 检查数组键是否等于某个值 JavaScript
文章推荐： c++ - `__declspec(novtable)`没有用吗？
文章推荐： javascript - 优化jsp页面图片加载
文章推荐： c++ - 内部带有结构的类未实例化(立即出现段错误)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com