jQuery:只需点击一下即可切换多个内容(noob)

时间:2010-01-29 22:03:22

标签: jquery toggle jquery-animate

原谅我 - 我不喜欢在这里添加初学者的问题,但唉,我被困了。我试图将一堆东西向左滑动并离开屏幕(包括背景图像),有效地切换控制面板(#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;
}

1 个答案:

答案 0 :(得分:1)

您使用的是哪个版本的jQuery?这些方法看起来没有jQuery 1.3+的正确参数。我认为这更像是:

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

您无法为班级切换提供速度 - 它是否具有班级。标准的第二个参数是一个标志,指示当前新值是应该打开还是关闭。