Need Help with jQuery Add-Remove Class to Preceding Element

At this site we have "old-current" navigation at the top: five main categories/links and sub nav underneath. There are lots of problems with this model and the UX not good.

http://www.himalayanacademy.com/readlearn/books

Our server side controller that is called for each top nav item inserts the class "active" in a model that changes the view before it leaves the server... So you won't find any JS that does the   switch between inactive and active that is the trigger for the sub-menus....

We decided to revamp this completely. Rather than hire it out I thought I would cut my teeth on the CSS and see how far I could got without any JS... see the development site page here:

see:

http://dev.himalayanacademy.com/readlearn/hindu-history

I completely "gutted" the previous CSS which was way bloated for the navigation and now we have simple drop down panels that allow for more links to be added. It may not be "best practices" because I am no expert, but it works.   BUT... I still need one dynamic feature which is that when the user moves the mouse down into the panel below the main head link, the main head link should maintain it's background color.  

I can manually enter the class "active" into any of the header links like this:

<li class="nav-header active readlearn">  

Open in new window


And the color and shape change as expected... so I know the CSS is OK.

But my jQuery selector is not working. The LI head menu element to target for the class toggle is the immediately preceding element to the UL class="nav-child" so I think this is correct:

$("nav-child").on({
    mouseenter  : function () {
      $(this).prev().addclass("active");
      },
      mouseleave : function () {
      $(this)prev().removeClass("active");
      }
      }); 

Open in new window


But it does not work... can you help?
BrahmanathaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

BrahmanathaAuthor Commented:
The DOM looks like this:

<nav class="nav-global"> 
			<ul class="nav-parent">
				<li class="nav-header monastery"><a href="/monastery">Monastery</a> 
				<ul class="nav-child monastery">
					<ul class="col1"> [snip]

Open in new window


The ul "nav-child" shows as a panel... and we need to toggle add/remove class "active" in the preceding "nav-header" LI element when the user moves mouse down into the panel of sub menu links.
0
Tom BeckCommented:
Your script had a couple of problems. Your class selector need a leading dot. Using prev() will not get you the parent, only the previous sibling.
$(document).ready(function(){
	$(".nav-child").on({
      mouseenter  : function () {
        $(this).parent('li').addClass("active");
      },
      mouseleave : function () {
        $(this).parent('li').removeClass("active");
      }
    });
});

Open in new window

However, even with the script fixed, only Read & Learn has a definition in place to change the background color for "active" class.
.nav-global .nav-parent li.readlearn > a:hover, .nav-global .nav-parent li.readlearn.active {
    background: none repeat scroll 0 0 rgb(230, 230, 207);
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BrahmanathaAuthor Commented:
Tom... outstanding! .. thanks...

 I sent my query midstream and then went back to add the definitions for the all five head LI's  it works!  

I have to tweak the CSS some more as we are getting two different background shapes.. but that's easy enough to fix.

check it out now...

http://dev.himalayanacademy.com/looklisten/art-photos

Cheers from Kauai....
0
Tom BeckCommented:
Glad you got it working. Thanks for the points.
0
BrahmanathaAuthor Commented:
It's working now... someone else is now tweaking the "look and feel" -- some like colors... other think it is tacky, I'm staying out of that one (hehe)  but the "engineering" is done.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.