We help IT Professionals succeed at work.
Get Started

Need Help with jQuery Add-Remove Class to Preceding Element

Brahmanatha
Brahmanatha asked
on
378 Views
Last Modified: 2015-03-01
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
CERTIFIED EXPERT
Top Expert 2015
Commented:
This problem has been solved!
Unlock 1 Answer and 5 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE