Help porting javascript function to jQuery - learning tool

Posted by chibineku on Stack Overflow See other posts from Stack Overflow or by chibineku
Published on 2009-10-08T13:54:37Z Indexed on 2010/04/05 5:03 UTC
Read the original article Hit count: 332

Filed under:
|
|
|

I am just learning jQuery and I wanted to see what I could do with the function below. This function adds or removes css classes to create a pull down menu (it is in fact Stu Nicholl's well known pull down menu). But I'm not getting very far (I've been learning jQuery for approximately an hoour now, so my DOM traversal isn't quite up there yet). I am curious to see how neat and elegant it can become using jQuery, and thought I'd see what you guys could come up with. Here is the existing function:

 var getEls = document.getElementById("menu").getElementsByTagName("LI");
 var getAgn = getEls;
 for (var i=0; i<getEls.length; i++) {
 getEls[i].onclick=function() {
 for (var x=0; x<getAgn.length; x++) {
 getAgn[x].className=getAgn[x].className.replace("unclick", "");
 getAgn[x].className=getAgn[x].className.replace("click", "unclick");
 }
 if ((this.className.indexOf('unclick'))!=-1) {
 this.className=this.className.replace("unclick", "");;
 }
 else {
 this.className+=" click";
 }
 }
 }
 }

My first failure started like this:

$(document).ready(function() {
  $('#menu > li').click(function() {
     $('#menu >li > ul').toggleClass('unclick');
  });
});

That works as far as it goes, but the next bit proved tricky. So, if anyone feels like having a go, please be my guest :)

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about css