根据切换 is-active class 隐藏和显示项目

Question

我使用以下代码切换按钮 class 以创建 full-screen 移动菜单。

HTML

button class="hamburger hamburger--slider" type="button">
<a href='#'><div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</a>

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.hamburger').click(function(){
$('.hamburger--slider').toggleClass('is-active');
});
});
});

现在我想在切换 class 时隐藏我的 header 中的另一个项目。is-active 存在。

以下代码用于隐藏项目，但一旦切换 class 消失，项目不会重新出现，而是保持隐藏状态，直到页面重新加载。

jQuery(function($) {
    if ($('.hamburger--slider.is-active').length) {
      $('.rey-headerCart-wrapper').hide();
    }
  });

感谢任何帮助:) !

Answer 1

您必须在汉堡菜单关闭后再次显示该元素：

document.addEventListener('DOMContentLoaded', function() {
  jQuery(function($){
    $('.hamburger').click(function(){
      $('.hamburger--slider').toggleClass('is-active');

      // hide / show other element
      if ($('.hamburger--slider.is-active').length) {
        $('.rey-headerCart-wrapper').hide();
      } else {
        $('.rey-headerCart-wrapper').show();
      }
    });
  });
});

或原版 javascript:

window.addEventListener("load", () => {
  document.querySelector(".hamburger").addEventListener("click", () => {
    document.querySelector(".hamburger--slider").classList.toggle("is-active");

    // hide / show other element
    const cart = document.querySelector(".rey-headerCart-wrapper");
    if (document.querySelector(".hamburger--slider.is-active")) {
      cart.style.display = "none";
    } else {
      cart.style.display = "block";

      // apply original display style
      // cart.style.display = "inline-block";
      // cart.style.display = "flex";
    };
  });
})

Answer 2

为了使这样的切换功能更易于理解、可维护和可扩展，您需要考虑您的 HTML 结构。

在您当前的结构中，您有一个按钮可以自动切换 class。因此，该按钮之外的任何必须更改外观或行为的元素都必须检查该按钮具有哪个 class，或者您必须扩展 click-event 处理程序才能添加这些元素（这就是您在此处所做的).

这很快就会变得非常混乱。

更好的方法是不在按钮上切换 class，而是在一个元素上切换，该元素是您要更改其行为的所有元素的公共父元素。

这样一来，您添加到该包装器中的任何内容都可以通过 CSS 进行操作，而无需更改您的 JS。

$('.nav-toggler').on('click', function() {
  $('#nav-wrapper').toggleClass('active');
});

.menu, .cart {
  padding: 1em;
  margin: 2px;
}

.cart {
 background: #FFF000;
}

.menu{
  background: #F1F1F1;
  display: none;
}

#nav-wrapper.active > .menu {
  display: block;
}

#nav-wrapper.active > .cart {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav-wrapper">
  <button class="nav-toggler">Toggle</button>
  <div class="menu">My Menu</div>
  <div class="cart">My Cart</div>
</div>

根据切换 is-active class 隐藏和显示项目

Hide and show an item based on a toggled is-active class

javascript

jquery

menu

toggle

show-hide