Question

147

Add active class to jquery dropdown menu

rated 0 times [ 152] [ 5] / answers: 1 / hits: 6895 / 11 Years ago, wed, january 15, 2014, 12:00:00

I am trying to add an active class to the parent list item on a jquery dropdown when the child unordered list appears.
Basically on hover of the child items I want an active class on the parent li.

Code below:

HTML

<ul id=Menu class=Nav>

<li><a href=#>Home</a></li>

<li class=Dropdown><a href=#>About Us</a> // WANT TO ADD CLASS HERE

    <ul>

        <li><a href=#>Perspex Story</a></li>

        <li><a href=#>What We Believe</a></li>

        <li><a href=#>Our Values</a></li>

        <li><a href=#>Product Qualities</a></li>

    </ul>

</li>

</ul>

jQuery

$(document).ready(function () {

    $('.Nav li').hover(

    function () {

        $('ul', this).stop().slideDown(300);

    },

    function () {

        $('ul', this).stop().slideUp(300);

    }

    );

    $('.Nav li:has(> ul)').addClass('HasChild');

});

CSS

    ul.Nav

   {

       margin:9px 0 0 0;

       padding:0;

       float:right;

   }



   ul.Nav li

   {

       display:inline-block;

       margin-right:-4px;

       list-style:none;

   }



   ul.Nav li a

   {

       text-decoration:none;

       text-transform:uppercase;

       color:#666666;

       font-size:12px;

       padding:8px 18px;

       display:block;

   }



   ul.Nav li.Selected a

   {

       color:#1ead34;

   }



   ul.Nav li a:hover

   {

       background-color:#1EAD34;

       color:#ffffff;

   }



   ul.Nav li.HasChild a:hover:after

   {

       color:#ffffff !important;

   }



   ul.Nav li:last-child a

   {

       padding-right:0;

   }



   ul.Nav li ul

   {

       display:none;

       position:absolute;

       margin:0;

       padding:0;

       z-index:100;

       background-color:#EBEBEB;

   }



   ul.Nav li ul li

   {

       display:block;

   }



   ul.Nav li ul li a

   {

       padding:8px 18px;

       display:block;

   }



   ul.Nav li.HasChild a:after

   {

       color: #666666;

       content: v;

       font-size: 7px;

       left: 6px;

       position: relative;

       top: -2px;

   }



   ul.Nav li.HasChild a:hover:after, ul.Nav li.HasChild a.Selected:after

   {

       color:#1ead34;

   }



   ul.Nav li.HasChild ul li a:after

   {

       content:;

   }

Thanks:) Link to JSFiddle http://jsfiddle.net/JR9Rk/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

michelecarissab

Add To Favorites

Follow

Total Points: 730

Total Questions: 97

Total Answers: 110

Location: Uzbekistan

Member since Sat, Feb 27, 2021

3 Years ago

answered 11 Years ago hadens · Accepted Answer

You don't need to add a class. Just try this

$('.Dropdown ul').hover(function(){

    $(this).parent().css('background-color','#1EAD34');

    $(this).parent().css('color','#ffffff');

    //$(this).parent().addClass('HasChild'); Even if you want to add class add this line

},

function(){

    $(this).parent().css('background-color','white');

    //$(this).parent().removeClass('HasChild');// if you added class  remove it 

});

Here is the updated Fiddle

If you want to add more list items, then make use of Id or class. Here is an example Fiddle