Question

我对javaScript很陌生，如果有人能够很高兴给我一些如何执行的指示，那将对我非常有帮助。我在Joomla 3中创建网站，我需要以一种方式对菜单进行样式化，当子菜单项处于活动状态时，父项应该更改背景颜色。我将.js链接包含在我模板的index.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;}

Answer 1

如果单击<li>元素并想要影响父元素，则可以使用.parent()方法来定位父元素。问题是你想要针对哪一个。如果它是包含div的{{1}}，则您必须访问父级的父级。例如，如果您在问题中说明<ul>有一个类<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');
});

这应该将点击的LI元素和它的父DIV变为深蓝色，并且点击的元素的兄弟姐妹显示为蓝色。

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

1 个答案: