Question

我无法更换课程，因此当您点击菜单并且它变为绿色时，它会在之后保持绿色，然后当您单击下一个菜单时它会再次交换。

JS

$('.menuActive').on('click', function(e) {
  $('.menuswap').toggleClass("menu"); //you can list several class names 
  e.preventDefault();
});

Answer 1

您当前的方法存在两个问题：

您需要更换.menu li a选择器和.toggleClass()。您实际想要$('.menuswap').toggleClass("menu li a")。

$('.menu li a').toggleClass("menuswap")

您将color: #444 !important添加到.menu li a，这会为其提供 maximum level of specificity （意味着您永远不会覆盖特异性）。您需要删除此!important声明，并为.menuswap选择器提供比.menu li a更多的特异性。我和.menu li a.menuswap一起去了。

此外，您可能只希望突出显示您点击的元素，而不是每个菜单项。为此，您可以使用简单的$('.menu li a') $(this)选择器。

要在点击其他元素时关闭突出显示，最简单的方法是将所有元素恢复为默认颜色，然后应用绿色突出显示到期望的元素。

这可以在以下示例中看到：

$('.menuActive').on('click', function(e) {
  e.preventDefault();
  $('.menu li a').removeClass("menuswap"); // remove highlight from all elements
  $(this).toggleClass("menuswap"); // add highlight to clicked element
});

.menu {
  float: right;
  text-decoration: none !important;
  z-index: 9999;
}

.menu li {
  cursor: pointer;
  opacity: 1;
  float: right;
  display: inline;
  text-transform: uppercase;
  list-style: none;
  padding-left: 0.8em;
}

.menu li a {
  text-decoration: none !important;
  color: #444;
  cursor: pointer;
  -webkit-transition: background 2s;
  /* For Safari 3.1 to 6.0 */
  transition: background 2s;
}

.menu li a:hover {
  color: #3CE33E !important;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

.menu li a:active {
  text-decoration: none !important;
  color: #B8E5FF;
  cursor: pointer;
}

.menu li a.menuswap {
  text-decoration: none !important;
  color: #44E163;
  cursor: pointer;
}

.menuf {
  font-size: 1.250em !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row-fluid menubar">
  <div class="menubarright">
    <div class="noselect menu">
      <ul class="menuf">
        <li><a class="menuActive" id="register-m" href="#home/register">Sign Up</a></li>
        <li class="white">|</li>
        <li><a class="menuActive" id="contactus-m" href="#home/our-partners">Partners</a></li>
        <li><a class="menuActive" id="ourteam-m" href="#home/ahimsa-citizenship">Citizenship</a></li>
        <li><a class="menuActive" id="aboutus-m" href="#home/our-ethos">Ethos</a></li>
        <li><a class="menuActive" id="home-m" href="#homepage">Home</a></li>
      </ul>
    </div>
  </div>
</div>

在li上交换课程

1 个答案: