Question

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

当您单击此按钮时，会出现隐藏菜单，当您再次单击时，菜单会消失，如您所见，我使用切换来执行此操作。

但是我遇到了一些问题，我的标题初始宽度是100％，但是当你打开菜单时它会将值更改为82，为菜单提供一些空间。

当我点击按钮时，标题div将值更改为82％，但是当我再次单击时，该值保持82％，我想再次更改为100％。

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

当您在隐藏显示时单击宽度更改，但当您再次单击隐藏/显示时，宽度不会再次更改为100％。

这是我的代码

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

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

  });

});

谢谢。

Answer 1

这不是css未重置的确切解决方案，但这可以为您提供结果。

不应将.toggle()与.css()一起使用，而应考虑使用所需的css创建一个类，然后使用.toggleClass()。

实施例

<强> JS

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

<强> CSS

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

Answer 2

您需要将toggle处理程序移到click处理程序之外，因为toggle会调用click事件。

来自http://api.jquery.com/toggle-event/

提供.toggle（）方法是为了方便起见。这是相对的直接用手实现相同的行为，这可以如果.toggle（）中内置的假设证明是有限的，则是必要的。例如，如果应用了.toggle（），则无法保证正常工作两次到同一个元素。由于.toggle（）内部使用了一个点击处理程序要做它的工作，我们必须解除绑定点击删除行为附带.toggle（），因此可以捕获其他点击处理程序交火。该实现还调用.preventDefault（）事件，因此不会遵循链接，也不会点击按钮如果已在元素上调用.toggle（）。

所以这应该有效：

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

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

的jsfiddle：

http://jsfiddle.net/c4tq8/12/

我怎样才能将div放回原来的宽度？

2 个答案: