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

扩展/缩回菜单栏

1 个答案: