javaScript在子项处于活动状态时更改父菜单项

我对javaScript非常陌生，如果有人能很乐意给我一些如何执行的指导，这将对我非常有帮助。我在Joomla 3中创建网站，我需要以一种方式对菜单进行样式化，当子菜单项处于活动状态时，父菜单项应更改背景颜色。我在模板的index.php文件头中包含了.js链接。但第二天我还在为想要的剧本苦苦挣扎

这是我的HTML：

<ul class="gf-menu l1">
    <li class="item128 parent">
        <a class="item" href"services">Services<span class="border-fixer"></span>::after</a>
        <div class="dropdown columns-1">
            <div class="column col1">
                <ul class="l2">
                    <li class ="item1"><a class="item" href="submenu-01">Submenu1</a></li>
                    <li class ="item2"><a class="item" href="submenu-02">Submenu2</a></li>
                    <li class ="item3"><a class="item" href="submenu-03">Submenu3</a></li>
                </ul>
            </div>
        </div>
    </li>
</ul>

如果单击元素并希望影响父元素，则可以使用.parent方法以父元素为目标。问题是你想瞄准哪一个。如果是包含的div，则必须访问父级的父级。例如，如果问题中有一个类项目，您可以这样做

$('.item').on('click', function(){
    var clickedLiElement = $(this);
    var parentHoldingUl = clickedLiElement.parent().parent();

    //now you can do whatever you want with both of them, for example
    clickedLiElement.addClass('active');
    parentHoldingUl.css('background-color', 'green');
});

根据评论更新：

略短一点的版本，它符合您在注释中指定的内容

$('.item').on('click', function(){
    $(this).css('background-color', '#5512F3');
    $(this).parent().parent().css('background-color', '#5512F3');
    $(this).siblings().css('background-color', '#AB99D5');
});

---

这将使单击的LI元素及其父DIV变为深蓝色，而单击的元素的兄弟姐妹变为浅蓝色。

感谢您的快速回复！我尝试这样做：我们的Servicesitem128父项->项1，如果它是活动的-它变成深蓝色itslef+父项；下拉列表的其余部分变为浅蓝色->项目2->项目3，以确保我正确理解它-活动的LI元素变为深蓝色，包装器DIV和其他LIs变为浅蓝色。。正当如果我的答案正确，我可以更新答案。是的，它是正确的，只有活动的LI元素和父项变为深蓝色，其余的LIs变为浅蓝色。非常感谢你的出席。提前谢谢你！更新。请告诉我它是否适合您，如果不适合，创建一个JSFIDLE将非常棒-我将尝试进一步帮助您。谢谢您，真的让我走上正确的方向，但正如我前面提到的，我是javaScript的傀儡，我需要更多的时间来配置它如何适合我，当我有一些结果时，我将在这里分享整个解决方案！非常感谢。

$('.item').on('click', function(){
    $(this).css('background-color', '#5512F3');
    $(this).parent().parent().css('background-color', '#5512F3');
    $(this).siblings().css('background-color', '#AB99D5');
});