Javascript簡單菜單擴展

嗨，我是JavaScript新手，我想編寫一個非常簡單的擴展子菜單。Javascript簡單菜單擴展

<div id="submenu"> 
    <ul> 
    <li> 
    Something 
    </li> 
    <li> 
    Another 
    </li> 
</ul> 
<div id="submenu-1" class="submenu-options"> 
    <ul> 
    <li>Something-sub</li> 
    <li>Something-sub</li> 
    <li>Something-sub</li> 
    </ul> 
</div> 
<div id="submenu-2" class="submenu-options"> 
    <ul> 
    <li>Another-sub</li> 
    <li>Another-sub</li> 
    <li>Another-sub</li> 
    </ul> 
</div> 
</div>

更具體地講，如果我將鼠標懸停在我想要的東西，如果鼠標離開我希望它被再次隱藏... 我知道它已經被問了很多，也有很多的東西子菜單中顯示如何做到這一點，但谷歌提出了太多令人不滿的答案。我希望你能騰出10分鐘的時間幫我擺脫我的苦難

謝謝，謝謝！

來源

2011-08-17 Soundz

我想你應該選擇你在Google搜索中看到的一個JQuery菜單示例並從那裏開始。 – RSG

我想過太多，但他們都帶着額外的代碼，我不能devide我從東西想這就是uneeded的東西，由於我缺乏的JavaScript技能 – Soundz

<div id="submenu"> 
    <ul> 
    <li id="1"> 
    Something 
    </li> 
    <li id="2"> 
    Another 
    </li> 
</ul> 
<div id="submenu-1" class="submenu-options"> 
    <ul> 
    <li>Something-sub</li> 
    <li>Something-sub</li> 
    <li>Something-sub</li> 
    </ul> 
</div> 
<div id="submenu-2" class="submenu-options"> 
    <ul> 
    <li>Another-sub</li> 
    <li>Another-sub</li> 
    <li>Another-sub</li> 
    </ul> 
</div> 
</div>

，如果你不使用任何庫，那麼你需要像這樣綁定它：

var menuText; 

    window.onload = function() 
    { 

    menuText= document.getElementById("1"); 
    menuText.onfocus = menuFocusHandler; 
    menuText.onblur = menuBlurHandler; 
    } 

function menuFocusHandler() 
{ 
document.getElementById("submenu-1").style.display="inline"; 
} 

function menuBlurHandler() 
{ 
document.getElementById("submenu-1").style.display="none"; 
}

，或者你可以做到這一點很好，方便地使用具有API的某些JavaScript庫輕鬆地做到這一點..一些庫是jQuery的（最流行的一種），煎茶等

一些庫有有菜單實施方案等擴展

來源

2011-08-17 23:33:24 Baz1nga

有一些調整，這真是救了我的一天：d – Soundz

我已經使用Dojo來完成這樣的事情，並取得了巨大的成功。也許Menu或MenuBar將對您有用。

來源

2011-08-17 23:30:49 vaxt

你可以做這種容易使用jQuery的事情，藉此下拉例如：

HTML：

<ul> 
    <li>Nav Item 1</li> 
    <li class="dropdown"> 
     Nav Item 2 
     <ul style="display:none"> 
      <li>Sub Menu Item 1</li> 
      <li>Sub Menu Item 2</li> 
      <li>Sub Menu Item 3</li> 
     </ul> 
    </li> 
    <li>Nav Item 3</li> 
</ul>

的jQuery：

$('.dropdown').hover(function() { 
    $('ul', $(this)).show(); 
}, function() { 
    $('ul', $(this)).hide(); 
});

來源

2011-08-18 00:56:26 Jake

我真的很感激，時間深入挖掘javascript和jquery – Soundz

你不需要的Java這只是普通的CSS會做：

li#submenu:hover div { 
    display: block; 
}

來源

2011-08-18 09:26:50 bavo

我也想過，但你怎麼懸停顯示：無;？ – Soundz

當你懸停一個元素（id =子菜單）時，你可以讓它的子元素出現（id = submenu1＆submenu2）。通過：懸停後放置的子選擇器（div）。 – bavo

Javascript簡單菜單擴展

回答

相關問題