如何在用戶點擊子元素時使用jQuery向父元素添加類？

我的菜單結構如下圖所示：如何在用戶點擊子元素時使用jQuery向父元素添加類？

<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>

當我點擊UL內的任何LI元素，我需要添加類「活動」到UL元素。我如何在jQuery中做到這一點？

來源

2011-12-01 Ravichandran Jothi

感謝您的answers.but當我點擊李頁面刷新得到這樣的類名未設置。但是點擊的LI的類名被設置爲「當前菜單項」。基於此，我需要爲其相應的UL設置類名。那麼這個怎麼做？ –

你使用wordpress嗎？你用什麼函數來生成菜單？這將幫助我們避免此任務的JavaScript。 – marcio

我用這個one.It工作

<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>

來源

2011-12-01 10:22:37

試試這個：

$('ul.sub-menu li').click(function(){ 
$(this).parent().addClass('active'); 
});

來源

2011-12-01 05:44:22 marcio

如果你打算將它添加到每個'LI'，爲什麼不把回調添加到'UL'？ – Farray

@Farray，如果'UL'有一個很大的填充，點擊UL內的空白空間會激活它......最好將事件放在'LI'上，這似乎更合理。 – marcio

設置LI的onclick事件： -

$(this).parent().attr('class', 'active');

來源

2011-12-01 05:44:28 vascowhite

$('li.menu-item').click(function() { 
    $(this).parent('ul').addClass('active'); 
});

根據您對頁面清爽的評論，這裏是應該工作的解決方案：

$(function() { 
    $('li.current-menu-item').parent('ul').addClass('active'); 
});

來源

2011-12-01 05:44:38

$('li').click(function() { 
    $(this).parent().addClass('active'); 
});

來源

2011-12-01 05:46:56 Babu

試試這個

$(document).ready(function(){ 
    $("li.current-menu-item").parent().addClass("active"); 
});

來源

2011-12-01 06:37:15

也許這樣的事情？

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

來源

2011-12-01 06:52:11

如何在用戶點擊子元素時使用jQuery向父元素添加類？

回答

相關問題