javascript - 如何在 javascript 中单击时更改 css？

Question

我的下拉导航菜单中的链接有问题。我认为问题是由于 body 中的猫头鹰旋转木马造成的，因为当我检查导航元素(右键单击检查元素)时，控制台突出显示猫头鹰旋转木马，当我将 .owl-carousel 显示更改为控制台中没有，然后导航菜单中的链接将起作用(悬停时颜色变化，鼠标变为指针)。因此，我想在切换菜单处于事件状态时(单击汉堡菜单时)将 .owl-carousel 显示更改为无。

var burgerMenu = function() {
  $("body").on("click", ".js-fh5co-nav-toggle", function() {
    $("#fh5co-nav > ul > li").css({ marginLeft: -50, opacity: 0 });
    $(this).toggleClass("active");

    var mainNav = $("#fh5co-main-nav");
    mainNav.slideToggle(400).toggleClass("active");

    if (mainNav.hasClass("active")) {
      menuAnimate(1, 0, 400, 200);
    } else {
      menuAnimate(0, -50, 1, 0);
    }
  });
};

<!-- Mobile Toggle Menu Button -->
<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
<!-- End Mobile Toggle Menu Button -->
<!-- Main Nav -->
<div id="fh5co-main-nav">
  <nav id="fh5co-nav" role="navigation">
    <ul class="nav">
      <li class="active"><a href="/index.html">Home</a></li>
      <li><a href="/about.html">About</a></li>
      <li><a href="/products.html">Products</a></li>
      <li><a href="/location.html">Location</a></li>
      <li><a href="/cafe.html">Cafe</a></li>
      <li><a href="/contact.html">Contact</a></li>
    </ul>
  </nav>
</div>
<!-- End Main Nav -->

我真的不知道该怎么做。我尝试添加:

$('.owl-carousel').css({display: none});

到 burgerMenu 函数，但这没有任何改变。

任何想法将不胜感激。

***编辑:谢谢! .css({"display": "none"}) - 这有效，但我没有想到 - 其他页面没有猫头鹰轮播，我仍然遇到这个问题。我认为最好的办法是在单击导航菜单时让 body 向下移动 - 这可能吗？有任何想法吗？再次感谢。

Answer 1

或者，由于您没有动态 css，您可以使用另一个类和类:

在你的 CSS 文件中:

.hidden {
  display: none;
}

在你的 js 中:

$('.owl-carousel').addClass("hidden");