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%;
}

单击时再次更改Div宽度

1 个答案: