使用同一按钮打开和关闭侧面菜单 [英] Open and close side menu with same button

问题描述

当前，我使用一个按钮显示侧边菜单，然后使用另一个按钮将其关闭

Currently I use one button to display a side menu and another to close it

<script>
$('#open-menu').click(function() {
  $("#mySidenav").css("width" , "250px");
  $("#l_m").css({"marginLeft": "250px", "position" : "absolute", "width" : "100%"});
  // $(this).attr('id','close-menu');
});

$('#close-menu').click(function() {
  $("#mySidenav").css("width" , "0");
  $("#l_m").css("marginLeft" , "0");
});
</script>

但是我希望打开和关闭菜单相同的按钮 怎么做 ?知道我使用的是Jquery 1.11.3

But I want the same button opens and closes my menu How to do ? Knowing that I use Jquery 1.11.3

谢谢

(我试图添加带有注释的行，但是当我单击它时，什么也没发生)

(I tried to add the line that is commented but when I click on it, nothing happens)

推荐答案

将打开的样式移动到单独的CSS类中.然后使用jQuery toggleClass() 函数在按钮单击时切换这些类.

Move the open styles into separate css classes. Then toggle these classes on button click using the jQuery toggleClass() function.

Javascript:

$('#toggle-menu').click(function() {
  $("#mySidenav").toggleClass("open");
  $("#l_m").toggleClass("open");
});

CSS:

#mySidenav {
  width: 0;
}

#mySidenav.open {
  width: 250px;
}

#l_m {
  margin-left: 0;
}

#l_m.open {
  position: absolute;
  margin-left: 250px;
  width: 100%;
}

这篇关于使用同一按钮打开和关闭侧面菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！