用同一个按钮关闭和打开div

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