隐藏和显示基于切换的is-active类的项目

如何解决隐藏和显示基于切换的is-active类的项目

我使用以下代码切换按钮类，以制作全屏移动菜单。

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');
});
});
});

现在，当出现切换的类.is-active时，我想在标题中隐藏另一个项目。

以下代码可隐藏项目，但是一旦切换的类消失，该项目就不会重新出现，而是保持隐藏状态，直到重新加载页面为止。

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

感谢任何帮助：）！

解决方法

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

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";
    };
  });
})

,

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

在当前结构中，您有一个按钮可以在其自身上切换类。因此，除了该按钮之外，任何必须更改外观或外观的元素都必须检查该按钮具有的类，或者必须扩展单击事件处理程序才能添加这些元素（这就是您所做的）。

这很快就会变得很混乱。

更好的方法可能是不要在按钮上切换类，而在要更改其行为的所有元素的公共父元素上切换。

这样，您已经添加到该包装器中的任何内容都可以通过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>