css javascript菜單子菜單問題

嗨我想創建一個網站的水平菜單欄，將有子菜單下，它是合理的（至少是頂級項目）。css javascript菜單子菜單問題

這個想法是，當在主頁上的頂級項目是可見的，當懸停在頂層項目上，我希望項目改變顏色和子菜單變得可見，然後當懸停在子菜單上這些應該改變顏色。這一切似乎都很好。

我一直在努力的是有一次，我點擊頂級項目，我被帶到該頁面，我需要該項目的子菜單保持可見狀態，直到我將鼠標懸停在任何其他頂級項目上（如我得到的空間重疊）。我認爲實現這一目標的唯一方法是使用jQuery隱藏活動子菜單時，將鼠標懸停在其他頂級項目上，但問題是即使將鼠標懸停在子菜單隱藏的「活動」選項上。

我試過用css來實現我所追求的，但我開始認爲它不可能，這就是爲什麼我現在正在看jQuery選項，但現在我也被卡在了這裏！我可能已經大量過於複雜的事情。

我做了一個小提琴，以幫助試圖解釋什麼，我就約：

http://jsfiddle.net/vLZv7/

這是因爲雖然你已經選擇的第一個頂級項目，你現在對「parent1 .html「

任何幫助或指導將非常感激。

我的代碼：

<div class='menu'> 
<ul> 
    <li class='active'><a href="#">Parent 1</a> 
    <ul> 
     <li><a href="#">Sub 1-1</a></li> 
     <li><a href="#">Sub 1-2</a></li> 
     <li><a href="#">Sub 1-3</a></li> 
    </ul> 
    </li> 
    <li><a href="what-we-do.php">Parent 2</a> 
    <ul> 
     <li><a href="#">Sub 2-1</a></li> 
     <li><a href="#">Sub 2-2</a></li> 
     <li><a href="#">Sub 2-3</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Parent 3</a> 
    <ul> 
     <li><a href="#">Sub 3-1</a></li> 
     <li><a href="#">Sub 3-1</a></li> 
    </ul> 
    </li> 
</ul> 
</div>

CSS：

.menu ul{ 
    text-align:justify; 
    width:300px; 
    min-width:500px; 
    margin-top:60px; 
} 
.menu ul:after{ 
    content:''; 
    display:inline-block; 
    width:100%; 
} 
.menu ul li{ 
    display:inline-block; 
    list-style:none; 
    white-space:nowrap; 
    margin:0; 
    padding:0; 
} 
.menu ul li a{ 
    text-decoration:none; 
    color:#000; 
} 
.menu ul li:hover a{ 
    color:#CCCC00; 
    border-bottom:1px solid #CCCC00; 
} 
.menu ul li ul{ 
    display:none; 
} 

.menu ul li:hover ul{ 
    position:absolute; 
    display:block; 
    text-align:justify; 
    width:500px; 
    min-width:500px; 
    margin:0; 
    padding-top:20px; 
} 
.menu ul li:hover ul li a{ 
    color:#000; 
    border:none; 
    margin-right:25px; 
} 
.menu ul li:hover ul li:hover a{ 
    color:#CCCC00; 
} 
.menu li.active a{ 
    color:#CCCC00; 
    border-bottom:1px solid #CCCC00; 
} 
.menu li.active ul{ 
    position:absolute; 
    display:block; 
    text-align:justify; 
    width:500px; 
    min-width:500px; 
    margin:0; 
    padding-top:20px; 
} 
.menu li.active ul li a{ 
    color:#000; 
    margin-right:25px; 
    border-bottom:none; 
} 
.menu li.active ul li:hover a{ 
    color:#CCCC00; 
    margin-right:25px; 
} 
.hide{ 
    display:none; 
}

簡單的jQuery：

$('.menu').hover(
function(){ $('.menu li.active ul li a').addClass('hide') }, 
function(){ $('.menu li.active ul li a').removeClass('hide') } 
)

來源

2014-01-23 user3095078

__「我一直在努力的是，當我點擊頂級項目並且我被帶到那個頁面時，我需要該項目的子菜單保持可見，直到我將鼠標懸停在任何其他頂級項目上（如重疊在我得到的空間）。「__我不確定你想要達到什麼效果，如果你離開頁面，有什麼好處可以讓」舊「頁面子菜單可見？ –

沒有簡單得多

$('.menu li:not(.active)').hover(
    function(){ $('.menu li.active ul li a').addClass('hide') }, 
    function(){ $('.menu li.active ul li a').removeClass('hide') } 
)

來源

2014-01-23 15:38:19

+1不錯，沒有想到它。。:) – DaniP

您可以更改觸發事件來匹配li元素這樣的選擇：

$('.menu li').hover(......

然後unbind()爲.active項目懸停動作：

$('.menu li.active').unbind('mouseenter mouseleave');

http://jsfiddle.net/vLZv7/7/

來源

2014-01-23 15:38:42 DaniP

css javascript菜單子菜單問題

回答

相關問題