javascript - 展开/收缩菜单栏

Question

我正在使用 jQuery 从屏幕左侧展开/缩回菜单栏。

这是我到目前为止所拥有的:

$(document).ready(function(){
  $('.menu-button').on("click",
    function(){
      $('.menu').css("left","0");
      $('.menu-button').addClass("clicked");
    }
  );

  $('.menu-button clicked').on("click",
    function(){
      $('.menu').css("left","-168");
      $('.menu-button').removeClass("clicked");
    }
  );

});

菜单栏正在展开，但没有缩回。我认为这段代码是有道理的——但显然没有。想法？

Answer 1

你需要改变

$('.menu-button clicked')

至

$('.menu-button.clicked')

但问题是当你再次点击时。两次点击都会发生。所以你添加和删除类。要解决这个问题，您可以执行类似的操作

$(document).ready(function(){
  $('.menu-button').on("click", function(){
      if($('.menu-button').hasClass('clicked')) {
          $(this).removeClass("clicked");
          $('.menu').css("left","-168");
      } else {
          $(this).addClass("clicked");
          $('.menu').css("left","0");
      }
  });
});

但最简单的方法是使用 toggleClass ，如下所示:

$('.menu-button').on("click", function(){
    $('.menu').toggleClass( "clicked" );
    $(this).toggleClass( "clicked" );
});

如果可能的话，您应该始终通过CSS更改CSS，而不是使用javascript内联样式..所以现在使用.toggleClass您可以切换类并更改您的CSS。只是在此处添加彩色边框给您一个想法，但您可以根据需要更改样式。

.menu {
    /* add your styles here */
    left: -168px;
    border: solid 2px red;
}

.menu.clicked {
    /* add your styles here */
    left: 0;
    border: solid 2px green;
}

.menu-button {
    /* add your styles here */
    border: solid 2px orange;
}

.menu-button.clicked {
    /* add your styles here */
    border: solid 2px lime;
}