Question

我想用相同的按钮打开和关闭我的菜单。这是我的代码。

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

检查这个小提琴：https://jsfiddle.net/uyjogg5e/10/

（我试图添加评论的行，但是当我点击它时，没有任何反应）

Answer 1

您可以在类中设置css属性：

.side-nav-show{
   width : 250px;
}
.l_m-show{
   marginLeft:250px;
   position:absolute;
   width:100%;
}

然后在点击元素时切换类：

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

<强> Working Demo

Answer 2

var a = 0;
$('#open-menu').click(function() {
    if(a % 2 == 0){
       $("#mySidenav").css("width" , "250px");
       $("#l_m").css({"marginLeft": "250px", "position": "absolute", "width" : "100%"});
    }
    else{
       $("#mySidenav").css("width" , "0");
       $("#l_m").css("marginLeft" , "0");
    }
    a++;
});

用相同的按钮关闭并打开div

2 个答案: