Jquery选择父li a if子元素为活动

I spent hours looking for a CSS only then jQuery solution for this. I've seen this everywhere but not sure how to do one from the scratch.

我花了几个小时寻找CSS，然后才找到jQuery解决方案。我到处都见过这种情况，但不知道如何从头开始。

What I want to do is, I have a menu as a list, and another list in it, and another. So this is a three level horizontal menu.

我想做的是，我有一个菜单作为一个列表，一个列表，一个列表。这是一个水平的水平菜单。

What I want to do is, when a child is selected, I want to change the background colour of the parent li a so it looks like breadcrumbs if you know what i mean.

我想做的是，当一个孩子被选中时，我想要改变父结点李a的背景颜色，这样它看起来就像面包屑一样，如果你知道我的意思的话。

This is my current css

这是我当前的css

.menu {
    z-index: 9999;
    position:relative;
    background-image: url(images/top_nav_lili_repeat.png);
    background-repeat: repeat-x; height:38px;
    font-family: 'Open Sans', sans-serif;
    text-transform:uppercase;
}
.menu ul ul {
    display: none;
}
.menu ul li:hover > ul {
    display: block;
}
.menu ul {

    color: #797979;
    padding: 0 0px;

    list-style: none;
    position: relative;
    display: inline-table;
}
.menu ul:after {
    content: "";
    clear: both;
    display: block;
}
.menu ul li {
    float: left;
}
.menu ul li:hover {
    background: #4b545f;
}
.menu ul li:hover a {
    color: #EBAD2D;
}
.menu li a.seleted ul li a{ background-color:#ff0000;}
.menu ul li a {
    display: block;
    padding: 11px 16px;
    color: #bbb;
    text-decoration: none;
}
.menu ul li a.selected { background-color:#ff0000;}

.menu ul ul {
    background: #5f6975;
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
    width: 200px;
}
.menu ul ul li {
    float: none;
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}
.menu ul ul li a {
    padding: 10px 16px;
    color: #fff;
}
.menu ul ul li a:hover {
    background: #4b545f;
}
.menu ul ul ul {
    position: absolute;
    left: 100%;
    top: 0;
}

and my current HTML menu looks like this.

现在的HTML菜单是这样的。

<div class="menu">

            <ul>
    <li><a href="#" title="Menu Item 1">Home</a>
        <ul>
            <li><a href="#" title="Sub-Menu Item 1">Home link 1</a>
                <ul>
                    <li><a href="#" title="Sub-Sub-Menu Item 1">Home Link 1 Link 1</a></li>
                    <li><a href="#" title="Sub-Sub-Menu Item 2">Home Link 1 Link 2</a></li>
                    <li><a href="#" title="Sub-Sub-Menu Item 3">Home Link 1 Link 3</a></li>
                </ul>
            </li>
            <li><a href="#" title="Sub-Menu Item 2">About</a>
                <ul>
                    <li><a href="#" title="Sub-Sub-Menu Item 1">About 1</a></li>
                    <li><a href="#" title="Sub-Sub-Menu Item 2">About 2</a></li>
                    <li><a href="#" title="Sub-Sub-Menu Item 3">About 3</a></li>
                </ul>
            </li>
            <li><a href="#" title="Sub-Menu Item 3">Contact</a>
                <ul>
                    <li><a href="#" title="Sub-Sub-Menu Item 1">Contact 1</a></li>
                    <li><a href="#" title="Sub-Sub-Menu Item 2">Contact 2</a></li>
                    <li><a  class="selected" href="#" title="Sub-Sub-Menu Item 3">Contact 3</a></li>
                </ul>
            </li>
        </ul>
    </li>

</ul>
          </div>

If you look at the last li a Contact 3 I have a class attached to it as selected, my CMS will add this class to the selected element. So What I want to do is change the background colour of the parent <a>Contact</a> and the <a>Home</a> with css or Jquery and I want this to crossbrowser compatible too. Thanks heaps guys.

如果您查看最后一个li a Contact 3，我有一个类被选中，我的CMS会将这个类添加到所选的元素中。所以我要做的是改变父元素Contact和Home的背景颜色使用css或Jquery我也想让它与跨浏览器兼容。由于堆。

Heres a fiddle : http://jsfiddle.net/8s3Bc/

这里有一个小提琴:http://jsfiddle.net/8s3Bc/

3 个解决方案

#1

All you need is to select anchor with the selected class, and iterate it's li parents to change their background.

您所需要做的就是使用所选的类选择anchor，并迭代它的li父类来更改它们的背景。

In the following statement, I added parent class for parent li elements.

在下面的语句中，我为父li元素添加了父类。

$('.menu li a.selected').parents('li').addClass('parent');

And i defined background color for parent class.

我定义了父类的背景色。

.parent {
   background-color:#ff0000;
}

Here is the working example: http://jsfiddle.net/dhMSN/

这里有一个工作示例:http://jsfiddle.net/dhMSN/

#2

like this? http://jsfiddle.net/8s3Bc/5/

像这样的吗?http://jsfiddle.net/8s3Bc/5/

added this jquery

添加这个jquery

$('.menu ul ul > li').click(function(){
    $(this,'a').addClass('selected');
});

and changed some css around, its on the fiddle

并改变了一些css，它在小提琴上

#3

May be @halilb answer is what you want, But look at this, may be improve your performance and look Feel of your menu.

可能是@halilb的答案是你想要的，但看看这个，可能是提高你的表现和你的菜单感觉。

Demo:http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
Code: https://github.com/dynamicdriverepo/ddsmoothmenu

演示:http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm代码:http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

Get Idea from this Here you can find proper implemented jQuery and css which you need.

从这里你可以找到合适的实现jQuery和css。

Creating new functionality is Good, but not good when it's available for free and most important part Proper Tested, with more functionality and well Structured code

创建新功能很好，但如果它是免费的，而且最重要的部分是经过适当测试的，并且具有更多的功能和结构良好的代码，那么创建新功能就不好了

Note : I am not inspiring you to theft code every time or always copy someone code but save development time.

注意:我不是鼓励您每次都去偷代码，或者总是复制别人的代码，但是这样可以节省开发时间。

#1