Javascript 使用相同按钮打开和关闭侧菜单

目前，我使用一个按钮显示侧菜单，另一个按钮关闭它

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

$（“#打开菜单”）。单击（函数（）{
$（“#mySidenav”）.css（“宽度”，“250px”）；
css（{“marginLeft”：“250px”，“位置”：“绝对”，“宽度”：“100%”）；
//$（this.attr（'id'，'close-menu'）；
});
$（“#关闭菜单”）。单击（函数（）{
$（“#mySidenav”）.css（“宽度”，“0”）；
$（“#l#m”）.css（“marginLeft”，“0”）；
});

但我想要相同的按钮打开和关闭我的菜单 如何做？知道我使用Jquery 1.11.3

多谢各位

---

（我试图添加注释行，但当我单击它时，什么也没有发生）

将打开的样式移动到单独的css类中。然后使用jQuery函数单击按钮切换这些类

Javascript:

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

#mySidenav {
  width: 0;
}

#mySidenav.open {
  width: 250px;
}

#l_m {
  margin-left: 0;
}

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

CSS:

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

#mySidenav {
  width: 0;
}

#mySidenav.open {
  width: 250px;
}

#l_m {
  margin-left: 0;
}

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

---

只需创建一个类来显示菜单，并在按钮上切换该类，单击

$（“#打开菜单”）。单击（函数（）{
$（“#mySidenav”）.toggleClass（'show'）
});
#mySidenav{背景：红色；高度：100px；显示：无；}
.show{display:block！重要；}

菜单
您可以使用jQuery数据属性使用这种简单的方法

<a id="menu" data-stat="close">Menu Button</a>

$('#menu').on('click', function(){
    if($(this).data('stat') == "close"){
        $(this).data('stat', 'open');

        /* open Menu code */

    }else if($(this).data('stat') == "open"){
        $(this).data('stat', 'close');

        /* close Menu code */

    }
});

菜单按钮
$（'#菜单'）。在（'单击'，函数（）上）{
如果（$（this）.data（'stat'）==“close”）{
$（this.data（'stat'，'open'）；
/*打开菜单代码*/
}else if（$（this）.data（'stat'）==“open”）{
$（this.data（'stat'，'close'）；
/*关闭菜单代码*/
}
});
以下是您可以执行的操作，我将此“技巧”称为自定义切换：

$(document).ready(function(){
  $(/*selector for the button*/)
    .click(function(){
      const $this = $(this);
      let prop = $this.prop("opened");

      if(prop === undefined){
        $this.prop("opened", false);
        prop = $this.prop("opened");
      }

      if(prop === false){
        /*handle opening here*/
      }

      if(prop === true){
        /*handle closing here*/
      }

      $this.prop("opened", !prop);
    });
});

请包含所有相关代码。如果使用同一按钮，则可以使用属性（
$（/**/）.prop
）使用自定义切换我已经编辑了我的帖子并添加了CSSThank you，但我不想使用另一个jquery版本代码片段中使用的jquery版本在这里是不相关的-它只是使用了
.toggleClass
，它从1.0开始就存在了。我已经更新了代码以显示它仍然有效。这就是
$（）.data（）
的用途（而不是
.prop
）（除此之外，这是一个好主意）是的，数据也很好用，但与prop不同，它最终会出现在html上；）我怀疑你把这两种情况混淆了-
。data（）
不会改变html。