Question

我想在不向子（子菜单）应用不透明度的情况下向标题（父级）添加不透明度。在jquery中？我添加了一个类'temp'以将不透明度应用于temp中的标题：before.but no luck

jQuery(document).ready(function($) {
  if ($('#Clients').length) {
    $('#header_wrapper.secondMenu').addClass('temp');
  }
});

#header_wrapper {
  margin: 0 auto;
  width: 100%;
  max-width: 960px;
  left: 0;
  right: 0;
  position: absolute;
  z-index: 99;
  top: 0;
}

.header_wrapper:hover .leaf {
  display: block;
}

.header-mobile {
  margin-left: 10.333%;
  width: 73%;
}

#post-content {
  margin: 0px;
}

#logo {
  margin-top: 20px;
  position: relative;
  z-index: 9999;
}

.secondMenu #logo {
  margin-top: 8px;
}

#main-menu {
  margin-top: 35px;
}

#main-menu .menu .expanded a {
  cursor: default;
}

#main-menu .menu .leaf a {
  cursor: pointer;
}

.secondMenu #main-menu {
  margin-top: 23px;
}

.secondMenu .menu-navigation-container .menu .menu {
  background-color: rgba(250, 250, 250);
}

.secondMenu .menu-navigation-container .menu .menu li a {
  display: inline-block;
  min-width: 225px;
  padding: 9px 23px 9px 9px;
}

.secondMenu .menuHeader {
  background-color: rgb(250, 250, 250);
  box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.11);
  height: 77px;
  left: 0;
  margin: 0 auto !important;
  position: fixed;
  right: 0;
  width: 100%;
  z-index: 999;
}

.secondMenu .menu li a {
  color: black !important;
}

.secondMenu .responsiveMenu {
  margin: 0 auto;
  max-width: 960px;
  width: 100%;
}

.menu-navigation-container .menu li {
  float: left;
  list-style: none;
}

.menu-navigation-container .menu,
.menu-navigation-container .menu .menu {
  margin: 0;
  padding: 0;
}

.menu-navigation-container .menu .menu {
  display: none;
}

.menu-navigation-container .menu .menu li,
.menu-navigation-container .menu li {
  margin: 0;
  padding: 1.6%;
}

.secondMenu .menu-navigation-container .menu .menu li,
.menu-navigation-container .menu li {
  padding: 0;
  margin: 0;
}

.secondMenu .menu-navigation-container .menu .menu li a:hover {
  background-color: black;
  color: white !important;
}

.secondMenu .menu-navigation-container .menu li:hover a {
  color: white !important;
}

.secondMenu .menu-navigation-container .menu li:hover,
.secondMenu .menu-navigation-container .menu li a:hover {
  background-color: black;
  color: white !important;
}

.secondMenu .menu-navigation-container .menu .menu li a {
  color: black !important;
}

.menu-navigation-container .menu .menu li a,
.menu-navigation-container .menu li a {
  color: white;
  padding: 8px 11px 26px;
  display: block;
}

.secondMenu:hover .menu-navigation-container .menu .menu {
  display: block;
}

.menu-navigation-container .menu .menu {
  position: absolute;
  margin: 0;
  padding: 0;
  background-color: white;
}

.firstMenu .menu-navigation-container .menu .menu li a {
  color: black;
  display: inline-block;
  min-width: 100%;
  padding: 9px 23px 9px 9px;
}

.firstMenu .menu-navigation-container .menu .menu li a:hover {
  background-color: black;
  color: white;
}

.firstMenu .menu-navigation-container .menu li:hover a {
  color: black;
}

.firstMenu .menu-navigation-container .menu li:hover,
.firstMenu .menu-navigation-container .menu li a:hover {
  background-color: white;
  color: black;
}

.menu-navigation-container .menu .menu li {
  float: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

.temp:before {
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="secondMenu" id="header_wrapper" style="display: block;">
  <div class="mainHeader menuHeader animated fadeInDown">
    <div class="responsiveMenu">
      <div class="user-menu-wrapper">
        <div class="full-wrap"></div>
      </div>
      <div class="row header">
        <div class="col-sm-2 col-lg-2">
          <h1 id="site-title">
            <a href="/test/" title="Home"></a>
          </h1>
          <div id="site-description">
            <h1 id="site-title"></h1>
          </div>
        </div>
        <!--<div class="col-sm-1 col-md-1"></div>-->
        <div class="col-sm-10 col-md-10 header-mobile">
          <nav class="navMenu" id="main-menu" role="navigation">
            <button class="navbar-toggle" data-target="#navbarCollapse" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
            <a class="nav-toggle" href="#"></a>
            <div class="menu-navigation-container">
              <ul class="menu">
                <li class="first expanded">
                  <a class="active" href="/test/" title="">Solutions</a>
                  <ul class="menu" style="display: none;">
                    <li class="first leaf">
                      <a href="http://auras.test.com/" target="_blank" title="">AURAS</a>
                    </li>
                    <li class="leaf">
                      <a href="http://test.com/acia" title="">ACIA</a>
                    </li>
                  </ul>
                </li>
                <li class="expanded">
                  <a class="active" href="/test/" title="">Services</a>
                  <ul class="menu" style="display: none;">
                    <li class="first leaf">
                      <a href="http://test.com/software-engineering-solutions" title="">Software engineering</a>
                    </li>
                    <li class="leaf">
                      <a href="http://test.com/independent-testing-services" title="">Independent Testing Services</a>
                    </li>
                  </ul>
                </li>
                <li class="expanded">
                  <a class="active" href="/test/" title="">Industries</a>
                  <ul class="menu" style="display: none;">
                    <li class="first leaf">
                      <a href="http://test.com/independent-software-vendors" title="">Independent Sotware Vendors</a>
                    </li>
                    <li class="leaf">
                      <a href="http://test.com/retail" title="">Retail</a>
                    </li>
                  </ul>
                </li>

                <li class="expanded">
                  <a class="active" href="/test/" title="">About</a>
                  <ul class="menu" style="display: none;">
                    <li class="first leaf">
                      <a href="http://test.com/company-overview" title="">Company Overview</a>
                    </li>
                    <li class="last leaf">
                      <a href="http://test.com/in-the-news" title="">In the News</a>
                    </li>
                  </ul>
                </li>

              </ul>
            </div>
            <div class="clear"></div>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

不要使用不透明度，而是像这样

.temp{
   background-color: rgba(x, y, z, 0.48);
}

其中x，y和z是你的背景颜色。

这样做的原因是标题上的子项将使用100％的不透明度，你已将其设置为50％。

这是我一直在使用的解决方法

Answer 2

我认为你的if条件不起作用。将$('#header_wrapper.secondMenu').addClass('temp');放在if条件之外并删除：从css开始之前应该有效。

在没有子（子）菜单的情况下向标题菜单添加不透明度

2 个答案: