Jquery選擇父li如果子元素活動

我花了幾個小時尋找一個CSS，然後才爲此jQuery解決方案。我已經看到了這個地方，但不知道如何從頭開始做。Jquery選擇父li如果子元素活動

我想要做的是，我有一個菜單作爲列表，另一個列表和另一個列表。所以這是一個三級菜單。

我想要做的是，當選擇一個孩子時，我想要更改父母li a的背景顏色，使其看起來像麪包屑，如果你知道我的意思。

這是我目前的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; 
}

和我目前的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>

如果你看看過去的li aContact 3我連有作爲selected一類，我的CMS將這個類添加到選定的元素。所以我想要做的是改變父母<a>Contact</a>和<a>Home</a>與CSS或JQuery的背景顏色，我希望這與交叉瀏覽器兼容。感謝堆傢伙。

繼承人小提琴：http://jsfiddle.net/8s3Bc/

來源

2012-12-12 user1889007

所有你需要的是選擇與選擇類錨，並重復這李parents改變他們的背景。

在下面的語句，我加父類父李元素。

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

而且我定義背景顏色父類。

.parent { 
    background-color:#ff0000; 
}

這裏是工作示例：http://jsfiddle.net/dhMSN/

來源

2012-12-12 09:40:45 halilb

謝謝謝謝謝謝！ – user1889007

三級菜單怎麼樣？ http://stackoverflow.com/questions/35300274/how-to-keep-all-the-parent-except-the-first-li-highlighted-when-the-sub-li-is-ho謝謝。 – Si8

這樣嗎？ http://jsfiddle.net/8s3Bc/5/

加入這個jQuery

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

和改變周圍的一些CSS，其對小提琴

來源

2012-12-12 09:47:16 user1896534

可能@halilb答案是你想要的，但看看這個，可提高公司業績和看你的菜單的感覺。

演示：http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
代碼：從這個https://github.com/dynamicdriverepo/ddsmoothmenu

獲取理念在這裏你可以找到正確實施jQuery和CSS，你所需要的。

創建新的功能是好的，但並不好當它是免費提供的，最重要的部分適當的測試，更多的功能和結構良好的代碼

注：我看不上你每次盜竊代碼或者總是複製某些代碼，但節省開發時間。

來源

2014-06-13 06:53:25

Jquery選擇父li如果子元素活動

回答

相關問題