java脚本在子项处于活动状态时更改父菜单项

javaScript changing parent menu item when child item is active

本文关键字：菜单项 活动状态 脚本 java      更新时间：2023-09-26

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

这是我的 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>

这就是我的CSS：

.gf-menu .dropdown{
    border: 1px solid transparent; 
    border-radius:0; 
    background-color:#a9a9a9; 
    padding:10% 0; 
    width:100%;
    text-shadow:none;
    font-size:85%;
}
.gf-menu.l1 li.item1.active.last {background-color:#abcf39;}
.gf-menu.l1 li.item2.active.last {background-color:#f39512;}
.gf-menu.l1 li.item3.active.last {background-color:#f16e68;}

如果单击<li>元素并希望影响父元素，则可以使用 .parent() 方法来定位父元素。问题是您要针对哪一个。如果是包含<ul>的div，则必须访问父项的父项。例如，如果<li>具有您在问题中所述的类item，您可以这样做

$('.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 变为深蓝色，单击的 elemnent 的兄弟姐妹变为浅蓝色。

相关文章：