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

我还建议您重新审视您在课程中使用的逻辑。它们应该对通用元素进行分组，但是您已经为每个元素赋予了自己独特的类，这是完全相反的模式。

为了完成这项工作，你可以在所有元素上使用相同的类，例如。 link-item，然后在需要时通过JS或CSS中的索引标识它们。

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

切换类不适用于推送菜单

1 个答案: