當頁面處於活動狀態時，隱藏列表顯示爲隱藏狀態

有一天，我希望不要成爲這種東西的新手，但有些時候這種感覺有時候是如此不可逾越的！當頁面處於活動狀態時，隱藏列表顯示爲隱藏狀態

好的。我有一個隱藏的li項目的導航欄，在懸停時可見。

下面是資產淨值代碼：

<ul id="navbar"> 
    <li id="iex"><a href="index.php">About Rattletree</a></li> 
    <li id="upcomgshows"><a href="upcomingshows.php">Calendar</a></li> 
    <li id="sods"><a href="#">Sights &amp; Sounds</a> 
    <ul class="innerlist"> 
     <li class="innerlist"><img class="arrowAdjust" src="images/curved_arrow.png" alt="" /></li> 
     <li class="innerlist"><a href="/playlist.m3u" target="_blank" onclick="javascript:BatmoAudioPop('Rattletree Marimba',this.href,'1'); return false">Listen</a></li> 
     <li class="innerlist"><a href="/new_pictures.php">Photos</a></li> 
     <li class="innerlist"><a href="/video.php">Video</a></li> 
    <li class="innerlist"><a href="/press.php">Press</a></li> 
    </ul> 
    </li> 
    <li id="bookin"><a href="#">Contact</a> 
    <ul class="innerlist"> 
      <li class="innerlist"><img class="arrowAdjust" src="images/curved_arrow.png" alt="" /></li> 
      <li class="innerlist"><a href="/booking.php">Booking Info</a></li> 
      <li class="innerlist"><a href="/media.php">Media Inquiries</a></li> 
    </ul> 
    </li> 
    <li id="ste"> <a href="/sounds.php">Store</a></li> 
    <li id="instrumes"><a href="/instruments.php">The Instruments</a></li> 
    <li id="classe"><a href="classes.php">Workshops</a></li> 
</ul>

CSS：

div#navbar2 { 
background-color:#546F8B; 
border-bottom:1px solid #546F8B; 
border-top:1px solid #000000; 
display:inline-block; 
position:relative; 
width:100%; 
} 
div#navbar2 ul#navbar { 
color:#FFFFFF; 
font-family:Arial,Helvetica,sans-serif; 
font-size:16px; 
letter-spacing:1px; 
margin:10px 0; 
padding:0; 
white-space:nowrap; 
} 

div#navbar2 ul#navbar li ul.innerlist { 
color:#000000; 
display:none; 
position:relative; 
z-index:20; 
} 

div#navbar2 ul#navbar li { 
display:inline; 
list-style-type:none; 
margin:0; 
padding:0; 
position:relative; 
}

現在是有點棘手了我想做的事：如果用戶導航到其中一個內部列表頁面，我希望內部列表ul保持可見（使用特定的li顯示hovere d狀態）。

現在我想我可以自己解決這個問題，但是您可以在實時頁面上看到，如果用戶位於內部列表的頁面上，並且該列表可見，那麼如果它們懸停在其他導航標籤上，那麼這些內部列表就會重疊。這是個問題。

希望最後一句話是有道理的！

總之：我需要保持活動頁面的內部列表顯示，但如果用戶將鼠標懸停在另一個導航按鈕上，並且它擁有自己的內部列表，那麼活動內部列表需要消失。

清澈如泥？

來源

2010-05-08 Joel

您將需要使用Javascript來處理這個問題。您將無法完全使用CSS完成此操作。

你會想要做的是創建一個Javascript函數，它將在ul＃navbar的任何元素的「mouseover」事件中被觸發。這個函數會讓所有顯示的內部列表被隱藏，並顯示該菜單元素的正確內部列表。

來源

2010-05-08 05:41:45

我建議jQuery，因爲它給你一個完整的工具集這種事情。但基本上讓我們假設你有上面聲明的css。

$("ul#navbar li ul.innerlist").show()

或

$("ul#navbar li ul.innerlist").hide()

這些都將允許你控制你的可見性狀態。從How to get the children of the $(this) selector?

來源

2010-05-08 05:54:01 Gabriel

$("div#navbar2 ul#navbar li").hover(function() { 
    $("ul", this).show(); 
});

對於某些輸入我建議如下：您綁定這些父母。在您顯示的頁面上，給予班級active。

使用jQuery

然後，請執行以下操作：

$('li.active > ul').show();

而且，你要取消，李盤旋的可能性，因爲如果不這樣做，每當有人在徘徊，子菜單將用戶懸停後隱藏。

所以，

$('li.active').hover(function() { 
    $('li.active > ul').show(); 
});

這應該照顧它，我認爲。

祝你好運。

來源

2010-09-05 23:04:52 Amit

也可以用CSS做而已，請參見：http://aext.net/2009/12/incredible-drop-down-menu-solution-with-css-only/

要小心，你可以運行到上大網站的性能有問題：懸停的元素，這是在IE -.-

NOCH錨
爲IE客戶端避免使用：hover僞選擇器，用於非鏈接元素。如果您使用：懸停在非錨點元素上，測試IE7和IE8中的頁面爲確定您的頁面可用。如果您發現：懸停導致性能問題，請考慮有條件地使用JavaScript onmouseover事件處理程序爲IE 客戶端。

- >http://code.google.com/intl/de-DE/speed/page-speed/docs/rendering.html

來源

2010-10-10 14:01:51 shapeshifta

當頁面處於活動狀態時，隱藏列表顯示爲隱藏狀態

回答

相關問題