Javascript 在jquery中的子Li选择中未选择Li父元素

我已编写代码，使li在url基础上处于活动状态。它工作正常，但在子li上失败。它使子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>

jQuery（函数（）{
setNavigation（）；
});
函数setNavigation（）{
//此部分代码使li在url基础上处于活动状态
var pathname=window.location.pathname；
路径=路径名。替换（/\/$/，“”）；
路径=解码组件（路径）；
var value=jQuery（location.attr（'href'）；
//value=value.replace（'.html'，''）；alert（value）；
jQuery（“.flexy菜单a”）。每个（函数（）{
var href=jQuery（this.attr（'href'）；
如果（值===href）{
jQuery（this）.closest（'li'）.addClass（'active'）；
}
});
//这是孩子李的代码，但只有第一个代码有效
jQuery（'.flexy menu'）。子项（'li'）。单击（函数（）{
jQuery（this）.parent（'li'）.addClass（'active'）；
});
}

我的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（）
代替父级：

然后把这个放在doc ready中：

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

在这里，我用
.find（）
而不是
.children（）
稍微更改了选择器，因为
.find（）
也会查找孙子，如果要遍历到父对象，请使用
.closest（）
方法


我已经编写了代码，使li在url的基础上处于活动状态

好的！然后，您可以选择执行以下操作：

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


这应该起作用：
总之，您只需执行此操作，无需额外功能：

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

演示：

谢谢你的重播，但不起作用。仍然选择child li并将其激活。有一件事我忘了提及每次单击后页面加载。因此我认为单击事件在这里不起作用。我们必须检查url基础。@Adda你能告诉我们在你的情况下什么是
jQuery（location）
。@Adda这应该起作用
$（'a[href*=“+path+”].parents（'li'）.addClass（'active'）你不需要一个循环。谢谢一件事，我忘了在每次点击后都会加载页面。所以我认为点击事件在这里不起作用。我必须像检查家长一样检查url。
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();
});