jQuery：一键切换多个事物（菜鸟）答案

【问题标题】：jQuery: Toggling multiple things with one click (noob)jQuery：一键切换多个事物（菜鸟）
【发布时间】：2010-01-29 22:03:21
【问题描述】：

请原谅我 - 我不喜欢在这里添加初学者问题，但是，唉，我被卡住了。我正在尝试将一堆东西向左滑动并滑出屏幕（包括背景图像），有效地切换控制面板（#navCol）并使主要区域更大（.main 到 .mainLarge）。

在 Firefox 中可以正常工作，但在 IE 中不行。我应该注意，我是 jQuery 的初学者，但不是 html/css 的初学者，而且当前的 css 设置看起来很糟糕，但对于这个项目是无法避免的。我怀疑我的 jQuery 是错误的，因为在 IE 中每次我点击切换链接时，只会出现一些动画。再次点击时，其他人会这样做。

如果我需要澄清任何事情，请告诉我，并提前感谢！

$('a#nav-toggle').click(function() {
  $('#navCol').toggle('slide',400);
  $('#main').toggleClass('mainLarge', 530);
  $('body').toggleClass('backgroundOffset', 500);
  return false;
});

对吗？这是html：

<body>
<div id="horNav">
<ul id="navigation">  
...
</ul> 
</div>
<div id="navCol">
Left Col
</div>
<div id="main" class="main"> 
Main Col
<a href="#" id="nav-toggle"><-></a>
</div> <!-- End main -->
</body>

这是css：

body {
    background: #f1f1f1 url(/images/shadow.png) repeat-y top;
    background-position: 400px 0px;
}

.backgroundOffset{
    background-position: 55px 0px;
}

#navCol{
    background: #eaeaea;
    color: #000000;
    height:100%;
    left:0px;
    margin-right:40px;
    position:fixed;
    top:0;
    width:400px;
    padding-top: 70px;
}

.main{
    padding-left: 460px;
    padding-top: 100px;
    padding-right: 100px;
}

.mainLarge{
    background-position: 55px 75px;
    padding-left: 115px;
}

【问题讨论】：

什么版本的IE？我只是将您的代码放在一个文档中，它在 FF3.5 和 IE7 中的工作方式相同。
又一个无意义的错误——我有一些其他的 jquery 是冲突的。当我删除它时，它就像你说的那样工作。感谢您验证它是否有效。

标签： jquery toggle jquery-animate

【解决方案1】：

您使用的是什么版本的 jQuery？这些方法看起来不像 jQuery 1.3+ 的正确参数。我认为它更像是：

$('a#nav-toggle').click(function() { 
  $('#navCol').slideToggle(400);
  $('#main').toggleClass('mainLarge'); 
  $('body').toggleClass('backgroundOffset'); 
  return false; 
});

你不能为类切换提供速度——它要么有类，要么没有。标准的第二个参数是一个标志，指示当前新值是打开还是关闭。

【讨论】：

有趣，因为速度似乎会影响 Firefox 中的切换。但是谢谢你的提示！所以要滑动元素，我应该用jQuery拼出来，而不是尝试用类来做？
幻灯片是指动画，而不仅仅是快照。
是的，如果您希望它们实际滑动到特定位置，您需要使用 animate 函数并指定您希望它们结束的位置。