I'm doing a dropdown menu witch shows on click. If one is already open
it should close when another one is opened. I've currently got it
working on the first click, but afterward I need to click twice to
trigger the event.

A slimmed down version of the html looks like this:

<ul id="toolbar">
   <li><a href="#">Link1</a></li>
   <li><a href="#">Link2</a></li>
   <li id="tag" class="slider">
      <a href="#">Link1</a>
      <ul>
         <li><a href="#">Sublink1</a></li>
         <li><a href="#">Sublink2</a></li>
      </ul>
   </li>
   <li id="share" class="slider">
      <a href="#">Link1</a>
      <ul>
         <li><a href="#">Sublink1</a></li>
         <li><a href="#">Sublink2</a></li>
      </ul>
   </li>
</ul>

I want to keep this as generic as possible, without using id's,
because I want to reuse it in other places on the site. The js looks
like this:

$(".slider>a:first-child").click().toggle(slideOpen,slideClose);
function slideOpen() {
   $(this).parent().siblings().children(".open").next().slideUp
(200,'easeOutQuad');
   $(this).parent().siblings().children(".open").removeClass("open");
   $(this).parent().siblings().removeClass("open");

   $(this).next().slideDown(200,"easeInQuad");
   $(this).parent().addClass("open");
   $(this).addClass("open");
};
function slideClose() {
   $(this).next().slideUp(200,"easeOutQuad");
   $(this).parent().removeClass("open");
   $(this).removeClass("open");
};

To make matters worse, this doesn't work in IE6 or IE7 at all. Using
all ID's lets it work, but that's not what I'm after.

Any obvious solutions to what I'm doing wrong?
Thanks,
Eystein

Reply via email to