I have menu structure like below:
我有如下菜单结构:
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1564 current_page_item menu-item-5230" id="menu-item-5230"><a href="http://artofsujatha.wpstag.sirahu.net/curriculam-vitae/" title="Curriculam VItae">Curriculam VItae</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5231" id="menu-item-5231"><a href="http://artofsujatha.wpstag.sirahu.net/bio/" title="Bio">Bio</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5232" id="menu-item-5232"><a href="http://artofsujatha.wpstag.sirahu.net/artist-statement/" title="Artist Statement">Artist Statement</a></li>
</ul>
When I click any LI elements within the UL, I need to add class "active" to the UL element. How can I do this in jQuery?
当我点击UL中的任何LI元素时,我需要将类“active”添加到UL元素。我怎么能在jQuery中做到这一点?
7 个解决方案
#1
6
Try this:
尝试这个:
$('ul.sub-menu li').click(function(){
$(this).parent().addClass('active');
});
#2
3
$('li.menu-item').click(function () {
$(this).parent('ul').addClass('active');
});
Based on your comment about the page refreshing, here is a solution that should work:
根据您对页面刷新的评论,这是一个应该工作的解决方案:
$(function() {
$('li.current-menu-item').parent('ul').addClass('active');
});
#3
1
Set the onclick event of the LI to:-
将LI的onclick事件设置为: -
$(this).parent().attr('class', 'active');
#4
1
$('li').click(function() {
$(this).parent().addClass('active');
});
#5
1
Try this
尝试这个
$(document).ready(function(){
$("li.current-menu-item").parent().addClass("active");
});
#6
0
I use this one.It works
我用这个。它有效
<script>
$(document).ready(function(){
$('ul.sub-menu li').each(function (){
var linktext = $(this).attr('class');
if( $("linktext:contains('current-menu-item')") ) {
$(this).parent('ul').addClass('current');
}
});
});
</script>
#7
0
Maybe something like this?
也许是这样的?
$(function() {
function updateMenu() {
$('ul.sub-menu.active').removeClass('active');
$('li.current-menu-item').parent('ul.sub-menu').addClass('active');
}
$('li.menu-item').click(function(e) {
// prevent page from redirect
e.preventDefault();
// set new current-menu-item
$(this).siblings().removeClass('current-menu-item');
$(this).addClass('current-menu-item');
// and update active menu according the current-menu-item
updateMenu();
});
updateMenu();
});
#1
6
Try this:
尝试这个:
$('ul.sub-menu li').click(function(){
$(this).parent().addClass('active');
});
#2
3
$('li.menu-item').click(function () {
$(this).parent('ul').addClass('active');
});
Based on your comment about the page refreshing, here is a solution that should work:
根据您对页面刷新的评论,这是一个应该工作的解决方案:
$(function() {
$('li.current-menu-item').parent('ul').addClass('active');
});
#3
1
Set the onclick event of the LI to:-
将LI的onclick事件设置为: -
$(this).parent().attr('class', 'active');
#4
1
$('li').click(function() {
$(this).parent().addClass('active');
});
#5
1
Try this
尝试这个
$(document).ready(function(){
$("li.current-menu-item").parent().addClass("active");
});
#6
0
I use this one.It works
我用这个。它有效
<script>
$(document).ready(function(){
$('ul.sub-menu li').each(function (){
var linktext = $(this).attr('class');
if( $("linktext:contains('current-menu-item')") ) {
$(this).parent('ul').addClass('current');
}
});
});
</script>
#7
0
Maybe something like this?
也许是这样的?
$(function() {
function updateMenu() {
$('ul.sub-menu.active').removeClass('active');
$('li.current-menu-item').parent('ul.sub-menu').addClass('active');
}
$('li.menu-item').click(function(e) {
// prevent page from redirect
e.preventDefault();
// set new current-menu-item
$(this).siblings().removeClass('current-menu-item');
$(this).addClass('current-menu-item');
// and update active menu according the current-menu-item
updateMenu();
});
updateMenu();
});