javascript - 切换类不适用于推送菜单

Question

你能帮我告诉我为什么这段代码不起作用吗？单击“.push-button”时，它应该打开“#push-menu”并且可以正常工作，但另一部分不起作用，而不是在第一次单击时显示元素，然后在第二次单击时隐藏元素，当我打开菜单时它甚至没有显示它们它是空的，只有白色!

$(document).ready(function () {
 $(".push-button").click(function () {
  $("#push-menu").toggle(
    function (){
      $('.link-item-1').addClass('active-1');
      $('.link-item-2').addClass('active-2');
      $('.link-item-3').addClass('active-3');
      $('.link-item-4').addClass('active-4');
      $('.link-item-5').addClass('active-5');
  }, function (){
      $('.link-item-1').removeClass('active-1');
      $('.link-item-2').removeClass('active-2');
      $('.link-item-3').removeClass('active-3');
      $('.link-item-4').removeClass('active-4');
      $('.link-item-5').removeClass('active-5');
   }
 );
});
});

Answer 1

问题是因为 toggle() 方法不再以您期望的方式工作。它在几个版本前发生了变化。

但是，您可以通过使用 toggleClass() 来解决这个问题并大大简化您的代码:

$(".push-button").click(function () {
  $('.link-item-1').toggleClass('active-1');
  $('.link-item-2').toggleClass('active-2');
  $('.link-item-3').toggleClass('active-3');
  $('.link-item-4').toggleClass('active-4');
  $('.link-item-5').toggleClass('active-5');
});

我还建议您重新审视您在类方面使用的逻辑。它们应该对公共(public)元素进行分组，但是您为每个元素赋予了自己独特的类，这是完全相反的模式。

为了实现这一点，您可以在所有元素上使用相同的类，例如。 link-item，然后在需要时通过 JS 或 CSS 中的索引标识它们。

$(".push-button").click(function () {
  $('.link-item').toggleClass('active');
});