jquery - 单击时再次更改 Div 宽度

Question

我有一个固定的标题和一个隐藏的垂直菜单。

当有人点击按钮时，菜单出现，固定的标题宽度从 100% 变为 82%。

但是当我关闭菜单时，我的标题不会再次将值更改为 100%，如何在再次单击按钮时更改宽度值？

CSS

#header{
position: fixed;
height: 36px;
width: 100%;
background-color: white;
display:inline;
z-index: 1;
}

JQuery

<script>
$(window).load(function() {

$("#hide").click(function(){

   $("#menu").fadeToggle();
   $("#header").css({"width":"82%","left":"18%"});


});
});
</script>

谢谢

Answer 1

试试这个:

$("#hide").click(function(){

  $("#menu").fadeToggle();
  $('#header').toggle(function () {
    $("#header").css({"width":"82%","left":"18%"});
  }, function () {
    $("#header").css({"width":"100%","left":"18%"});
  });

});

如果您使用的是 jQuery 2.*，您可以这样做:

$("#hide").click(function(){

  $("#menu").fadeToggle();
  $('#header').toggleClass("active");

});

只需确保 .active 是这样的:

.active{
  width:82%;
  left:18%;
}