Jquery 如何将div恢复到原始宽度？

我有一个标题和一个菜单，菜单是一个隐藏的div，当你点击一个特定的按钮时会出现

当你点击这个按钮时，隐藏的菜单就会出现，当你再次点击时，菜单就会消失，正如你所看到的，我正在使用切换来实现这一点

但我有一些问题，我的标题初始宽度是100%，但当你打开菜单时，它会将值更改为82，以便给菜单留出一些空间

当我单击按钮时，标题div将值更改为82%，但当我再次单击时，值保持为82%，我希望再次更改为100%

我创建了一个JSFIDLE来显示发生了什么：

单击“隐藏显示”时，宽度会更改，但再次单击“隐藏/显示”时，宽度不会再次更改为100%

这是我的密码

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

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

  });

});

---

谢谢。

这并不是解决

css

不重置的精确方法，但这将为您提供结果

<> >而不是使用<代码> .ToGeLee（）/<代码> <代码> > CSS（）>代码>，应考虑使用所需的CSS生成类，然后使用<代码> .ToGLCGLASSUSER（）/<代码>

范例

JS

$("#hide").click(function(){
    $("#menu").fadeToggle();
    $('#header').toggleClass('shifted');
});

#header.shifted {
    width: 82%;
    left: 18%;
}

CSS

$("#hide").click(function(){
    $("#menu").fadeToggle();
    $('#header').toggleClass('shifted');
});

#header.shifted {
    width: 82%;
    left: 18%;
}

---

这不是不重置css的确切解决方案，但这将得到您的结果

<> >而不是使用<代码> .ToGeLee（）/<代码> <代码> > CSS（）>代码>，应考虑使用所需的CSS生成类，然后使用<代码> .ToGLCGLASSUSER（）/<代码>

范例

JS

$("#hide").click(function(){
    $("#menu").fadeToggle();
    $('#header').toggleClass('shifted');
});

#header.shifted {
    width: 82%;
    left: 18%;
}

CSS

$("#hide").click(function(){
    $("#menu").fadeToggle();
    $('#header').toggleClass('shifted');
});

#header.shifted {
    width: 82%;
    left: 18%;
}

---

这不是不重置css的确切解决方案，但这将得到您的结果

<> >而不是使用<代码> .ToGeLee（）/<代码> <代码> > CSS（）>代码>，应考虑使用所需的CSS生成类，然后使用<代码> .ToGLCGLASSUSER（）/<代码>

范例

JS

$("#hide").click(function(){
    $("#menu").fadeToggle();
    $('#header').toggleClass('shifted');
});

#header.shifted {
    width: 82%;
    left: 18%;
}

CSS

$("#hide").click(function(){
    $("#menu").fadeToggle();
    $('#header').toggleClass('shifted');
});

#header.shifted {
    width: 82%;
    left: 18%;
}

---

这不是不重置css的确切解决方案，但这将得到您的结果

<> >而不是使用<代码> .ToGeLee（）/<代码> <代码> > CSS（）>代码>，应考虑使用所需的CSS生成类，然后使用<代码> .ToGLCGLASSUSER（）/<代码>

范例

JS

$("#hide").click(function(){
    $("#menu").fadeToggle();
    $('#header').toggleClass('shifted');
});

#header.shifted {
    width: 82%;
    left: 18%;
}

CSS

$("#hide").click(function(){
    $("#menu").fadeToggle();
    $('#header').toggleClass('shifted');
});

#header.shifted {
    width: 82%;
    left: 18%;
}

---

您需要将

切换

处理程序移到

单击

处理程序之外，因为

切换

调用单击事件

从

提供.toggle（）方法是为了方便。相对来说 直接手动实现相同的行为，这可以 如果.toggle（）中内置的假设被证明是有限的，则必须这样做。 例如，如果应用，.toggle（）不能保证正常工作 对同一元素执行两次。因为.toggle（）在内部使用单击 处理程序要执行其工作，必须取消绑定单击以删除行为 附加了.toggle（），因此可以在 交叉火力。该实现还调用 事件，因此不会跟随链接，也不会单击按钮 已对元素调用if.toggle（）

因此，这应该是可行的：

$("#hide").click(function(){
  $("#menu").fadeToggle();
});

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

JSFiddle：

---

您需要将

切换

处理程序移到

单击

处理程序之外，因为

切换

调用单击事件

从

提供.toggle（）方法是为了方便。相对来说 直接手动实现相同的行为，这可以 如果.toggle（）中内置的假设被证明是有限的，则必须这样做。 例如，如果应用，.toggle（）不能保证正常工作 对同一元素执行两次。因为.toggle（）在内部使用单击 处理程序要执行其工作，必须取消绑定单击以删除行为 附加了.toggle（），因此可以在 交叉火力。该实现还调用 事件，因此不会跟随链接，也不会单击按钮 已对元素调用if.toggle（）

因此，这应该是可行的：

$("#hide").click(function(){
  $("#menu").fadeToggle();
});

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

JSFiddle：

---

您需要将

切换

处理程序移到

单击

处理程序之外，因为

切换

调用单击事件

从

提供.toggle（）方法是为了方便。相对来说 直接手动实现相同的行为，这可以 如果.toggle（）中内置的假设被证明是有限的，则必须这样做。 例如，如果应用，.toggle（）不能保证正常工作 对同一元素执行两次。因为.toggle（）在内部使用单击 处理程序要执行其工作，必须取消绑定单击以删除行为 附加了.toggle（），因此可以在 交叉火力。该实现还调用 事件，因此不会跟随链接，也不会单击按钮 已对元素调用if.toggle（）

因此，这应该是可行的：

$("#hide").click(function(){
  $("#menu").fadeToggle();
});

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

JSFiddle：

---

您需要将

切换

处理程序移到

单击

处理程序之外，因为

切换

调用单击事件

从

提供.toggle（）方法是为了方便。相对来说 直接手动实现相同的行为，这可以 如果.toggle（）中内置的假设被证明是有限的，则必须这样做。 例如，如果应用，.toggle（）不能保证正常工作 对同一元素执行两次。因为.toggle（）在内部使用单击 处理程序要执行其工作，必须取消绑定单击以删除行为 附加了.toggle（），因此可以在 交叉火力。该实现还调用 事件，因此不会跟随链接，也不会单击按钮 已对元素调用if.toggle（）

因此，这应该是可行的：

$("#hide").click(function(){
  $("#menu").fadeToggle();
});

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

JSFiddle：