活动类添加到jQuery的下拉菜单

我试图出现在孩子无序列表时，活动类添加到父列表项上一个jQuery下拉。基本上悬停的儿童项目，我想要一个积极的类父李。下面活动类添加到jQuery的下拉菜单

代码：

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/

来源

2014-01-15 Dale

什么是你的问题？ :) –

是的，你正试图出现在孩子无序列表时，问题什么是积极的类添加到父列表项上一个jQuery下拉？ –

对不起，也许我写了这个错误。基本上悬停的子项目，我想父母上的活动类li – Dale

你并不需要添加一个类。刚刚尝试这一点

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

来源

2014-01-15 11:04:31

谢谢，但如果我添加另一个列表项，他们都被选中？ http://jsfiddle.net/JR9Rk/5/ – Dale

如果是这样那么改变类或给予标识 –

http://jsfiddle.net/JR9Rk/6/ –

您已成功通过jQuery添加了类，但该类不提供你的CSS。首先添加。

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

然后改变你的js喜欢Fiddle

来源

2014-01-15 10:55:32 Era

这不会工作。我只想要上面的CSS上面的孩子UL悬停 – Dale

我已经更新了我的答案。 – Era

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

来源

2014-01-15 11:07:06

活动类添加到jQuery的下拉菜单

回答

相关问题