調整下拉菜單，所以頂級突出顯示

我使用此下拉菜單代碼：http://javascript-array.com/scripts/jquery_simple_drop_down_menu/，我試圖（沒有成功），即使鼠標向下移動到下拉鍊接上的下部鏈接，以保持最高級別突出顯示菜單。調整下拉菜單，所以頂級突出顯示

的HTML：

<ul id="jsddm"> 
    <li><a href="#">JavaScript</a> 
     <ul> 
      <li><a href="#">Drop Down Menu</a></li> 
      <li><a href="#">jQuery Plugin</a></li> 
      <li><a href="#">Ajax Navigation</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Effect</a> 
     <ul> 
      <li><a href="#">Slide Effect</a></li> 
      <li><a href="#">Fade Effect</a></li> 
      <li><a href="#">Opacity Mode</a></li> 
      <li><a href="#">Drop Shadow</a></li> 
      <li><a href="#">Semitransparent</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Navigation</a></li> 
    <li><a href="#">HTML/CSS</a></li> 
    <li><a href="#">Help</a></li> 
</ul>

原來的Javascript：

var timeout = 500; 
var closetimer = 0; 
var ddmenuitem = 0; 

function jsddm_open() 
{ jsddm_canceltimer(); 
    jsddm_close(); 
    ddmenuitem = $(this).find('ul').css('visibility', 'visible');} 

function jsddm_close() 
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} 

function jsddm_timer() 
{ closetimer = window.setTimeout(jsddm_close, timeout);} 

function jsddm_canceltimer() 
{ if(closetimer) 
    { window.clearTimeout(closetimer); 
     closetimer = null;}} 

$(document).ready(function() 
{ $('#jsddm > li').bind('mouseover', jsddm_open) 
    $('#jsddm > li').bind('mouseout', jsddm_timer)}); 

document.onclick = jsddm_close;

附：給那個寫這篇文章的人歡呼，我喜歡它，讓我的html超級乾淨，更容易更新。

來源

2011-03-04 Alan

我猜測有一個ul li：懸停或ul li a：懸停在你的樣式表中？ – Orbit 2011-03-04 14:40:31

我建議你嘗試使用superfish（http://users.tpg.com.au/j_birch/plugins/superfish/）來實現此功能 - 語法非常簡單！對於突出顯示的頂層，您需要在「jsddm_open」函數中嵌入代碼。我不知道如何做到這一點在原始的JavaScript，因爲jquery處理我所有的js要求..它就像.addClass（「突出顯示」）與該框架一樣簡單... – 2011-03-04 14:53:58

是的，懸停正在做一個：懸停在CSS，如鏈接。感謝Aditya，我會檢查出superfish作爲一種可能的解決方案。 – Alan 2011-03-04 15:19:07

添加

ul li:hover { 
    background:... 
}

在樣式表中，你應該得到預期的效果。因爲您的子菜單嵌套在您的列表項中 - 同時將鼠標懸停在子菜單上，您仍然可以有效地懸停在其父項（列表項）上。

您可以將鼠標懸停在ul li上 - 如果您喜歡，但由於子菜單不嵌套在其中，因此這樣做不會保留您的樣式。

來源

2011-03-05 09:29:59 tbwcf

完美，謝謝！ – Alan 2011-03-07 14:39:34

調整下拉菜單，所以頂級突出顯示

回答

相關問題