jQuery: Toggling multiple things with one click (noob)_问答_开发者

jQuery: Toggling multiple things with one click (noob)

开发者 https://www.devze.com 2022-12-18 07:47 出处：网络

Forgive me- I don\'t like adding to the beginner questions on here, but alas, I am stuck. I am trying to slide a bunch of things to the left and off the screen (including a background image), effectiv

Forgive me- I don't like adding to the beginner questions on here, but alas, I am stuck. I am trying to slide a bunch of things to the left and off the screen (including a background image), effectively toggling a control panel (#navCol) and making the main area bigger (.main to .mainLarge).

It's working ok in Firefox, but not in IE. I should note that I am beginner with jQuery, but not with html/css and the current css set up looks nasty but can't be avoided for this project. I suspect my jQuery is wrong, because in IE every time I hit the toggle link, only some of the animations occur. When clicked again, other ones do.

If I need to clarify anything, please let me know, and thanks in advance!

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

Is that right? Here is the 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>

And here's the 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;
}

What version of jQuery are you using? Those methods don't look like they have the right parameters for jQuery 1.3+. I would think it would be more like:

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

You can't supply a speed for the class toggle -- it either has the class or not. The standard second argument is a flag indicating the current whether the new value should on or off.