Добавить активный класс в раскрывающееся меню jquery

Question

Я пытаюсь добавить активный класс к элементу родительского списка в раскрывающемся списке jquery, когда появляется дочерний неупорядоченный список. В основном при наведении дочерних элементов я хочу активный класс на родительском элементе li.

код ниже:

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:""; 
    } 

Спасибо :) Ссылка на JSFiddle http://jsfiddle.net/JR9Rk/

Answer 1

Вам не нужно добавить класс. Просто попробуйте

$('.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 
}); 

Здесь использование обновляется Fiddle

Если вы хотите добавить больше элементов списка, а затем сделать из Id или class. Вот пример Fiddle

Answer 2

Вы успешно добавлен класс с помощью JQuery, но этот класс не доступен в вашем CSS. Добавьте это первым.

.HasChild{ 
    background-color:#1EAD34; 
    color:#ffffff; 
} 

затем изменить JS как Fiddle

Answer 3

$(document).ready(function() { 
    $('.Nav > li').hover(function() { 
     $('ul', this).stop().slideDown(300); 
    }, function() { 
     $('ul', this).stop().slideUp(300); 
    }); 

    $('li.Dropdown ul li').on('mouseover',function(){ 
     $(this).parent().prev().addClass('HasChild'); 
    }).on('mouseout',function(){ 
     $(this).parent().prev().removeClass('HasChild');  
    }); 
});