We help IT Professionals succeed at work.

Need Help with jQuery Add-Remove Class to Preceding Element

Brahmanatha
Brahmanatha asked
on
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?
Comment
Watch Question

Author

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.
Top Expert 2015
Commented:
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

Author

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....
Top Expert 2015

Commented:
Glad you got it working. Thanks for the points.

Author

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.