在jquery中选择子Li时未选择Li父元素

Li parent elemnt is not selected on child li selection in jquery

本文关键字:选择 Li 元素 jquery      更新时间:2023-09-26

我已经编写了代码,使li在url的基础上处于活动状态。它运行良好,但在子li上失败。它使子li处于活动状态,而我希望顶部li应该处于活动状态而不是子级。我的代码如下:

 <script type="text/javascript">
jQuery(function () {
    setNavigation();
});
function setNavigation() {

// this portion code make li active on url basis
    var pathname = window.location.pathname;
    path = pathname.replace(/'/$/, "");
    path = decodeURIComponent(path);
    var value = jQuery(location).attr('href');
//   value  = value.replace('.html', ''); alert(value);
    jQuery(".flexy-menu a").each(function () {
        var href = jQuery(this).attr('href'); 
        if (value === href) { 
            jQuery(this).closest('li').addClass('active');
        }
    });
// this is code for child li but only first code works
    jQuery('.flexy-menu').children('li').click(function(){ 
    jQuery(this).parent('li').addClass('active');
    });
}</script>

我的HTML是这样的:

<ul class="flexy-menu orange">
            <li style=""><a href="http://example.com/">Home</a></li>
            <li style=""><a href="JavaScript:void(0)">Collection</a>
<ul style="">            <li><a href="http://example.com/my-secret-garden.html">My Secret Garden </a></li>
     <li><a href="http://example.com/legend.html">Legend</a></li></ul>
</li>
            <li class="active" style=""><a href="http://example.com/artisans">Artisans</a></li>
            <li style=""><a href="http://example.com/contacts">Contact </a></li>
          </ul>

不使用父级.closest():

jQuery(this).closest('li').addClass('active');

并将其放入文档中:

jQuery(function () {
    setNavigation();
    jQuery('.flexy-menu').find('li').click(function(){ 
        jQuery(this).closest('li').addClass('active');
    });
});

在这里,我用.find()而不是.children()稍微更改了您的选择器,因为.find()也会查找grand-child,如果您想遍历到父级,则使用.closest()方法。


我已经写了代码,使li在url的基础上活动

好吧!然后你可以选择这样做:

$('a[href*="'+ path +'"]').parents('li').addClass('active');

这应该起作用:

All to All你只需要做这件事,不需要额外的功能:

jQuery(function () {
    var path = window.location.pathname;
    $('a[href*="'+ path +'"]').parents('li').addClass('active');
    jQuery('.flexy-menu').find('li').click(function(){ 
        jQuery(this).closest('li').addClass('active');
    });
});
jQuery('.flexy-menu > li').click(function(e){    
jQuery(this).closest('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});

演示:

http://jsfiddle.net/hqPQu/