用ul隱藏/顯示div用javascript

Question

讓我開始說我知道這是重複的，但是我找不到通過以前的答案找到解決方案，所以我希望有人可以解釋我做錯了什麼這個。

這是一個菜單輸出的一部分由PHP腳本：

<ul id="mtk_main_menu"> 
<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0', 'mtk_div_submenu_0');">Manager Options 
    <div id="mtk_div_submenu_0"> 
     <ul id="mtk_submenu_0"> 
      <li class="mtk_submenu">Preferences</li> 
      <li class="mtk_submenu">Employee Options</li> 
     </ul> 
    </div> 
</li> 

有以下爲我的腳本按照https://stackoverflow.com/a/11842992，徘徊其父容器時應該顯示各子

function showMenu(a,b) { 
$(a).hover(
function(){ 
    $(b).show(); 

}, 
function(){ 
    $(b).hide(); 
}) 
} 

Javascript和CSS是我的弱西裝，有人可以告訴我我的問題在哪裏嗎？我覺得onMouseOver不按我期望的方式工作。不過，我仍然在學習操縱DOM，請耐心等待，謝謝！

編輯以反映你與一個字符串參數，而不是兩個調用事件句柄missingno的建議

Answer 1

對於簡單的情況下，我寧願使用JS

繼承人望而卻步如何

HTML

<ul id="mtk_main_menu"> 
<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0, mtk_div_submenu_0');">Manager Options 
    <div id="mtk_div_submenu_0"> 
     <ul id="mtk_submenu_0"> 
      <li class="mtk_submenu">Preferences</li> 
      <li class="mtk_submenu">Employee Options</li> 
     </ul> 
    </div> 
</li> 

CSS

#mtk_main_menu:before, 
#mtk_main_menu:after { 
    content:""; 
    display:table; 
    clear:both; 
} 

#mtk_main_menu { 
    *zoom:1; 
} 

#mtk_main_menu > li { 
    position:relative; 
    float:left; 
} 

#mtk_main_menu > li > div { 
    position:absolute; 
    left:-999px; 
    background:grey; 
} 

#mtk_main_menu > li:hover > div { 
    left:0; 
} 

這將這樣的伎倆

小提琴：http://jsfiddle.net/Varinder/7pXSw/

編輯

如果你真的想要去的JS方法 - 繼承人如何：

HTML

<ul id="mtk_main_menu"> 
<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0, mtk_div_submenu_0');">Manager Options 
    <div id="mtk_div_submenu_0"> 
     <ul id="mtk_submenu_0"> 
      <li class="mtk_submenu">Preferences</li> 
      <li class="mtk_submenu">Employee Options</li> 
     </ul> 
    </div> 
</li> 

CSS

#mtk_main_menu:before, 
#mtk_main_menu:after { 
    content:""; 
    display:table; 
    clear:both; 
} 

#mtk_main_menu { 
    *zoom:1; 
} 

#mtk_main_menu > li { 
    position:relative; 
    float:left; 
} 

#mtk_main_menu > li > div { 
    position:absolute; 
    display:none; 
    /*left:-999px;*/ 
    background:grey; 
} 

#mtk_main_menu > li:hover > div { 
    /*left:0;*/ 
} 

JS

function showMenu(args) { 
      var arguments = args.split(","); 
      var submenuWrapper = arguments[1].replace(" ", ""); 
      var $subMenuWrapper = $("#" + submenuWrapper); 

      $subMenuWrapper.show(); 

      var $menuItem = $subMenuWrapper.closest("li"); 
      $menuItem.on("mouseout", function() { 
       $subMenuWrapper.hide(); 
       $(this).off("mouseout"); 
      }); 
     } 

小提琴：http://jsfiddle.net/Varinder/vnwy3/1/

Answer 2

。嘗試改變

showMenu('mtk_submenu_0, mtk_div_submenu_0') 

到

showMenu('mtk_submenu_0', 'mtk_div_submenu_0') 

此外，您的腳本中，你應該使用文字字符串，而不是使用你的參數

//This looks for an element of class "a" 
$("a").hover(

//This uses the contents of the `a` variable instead: 
$(a).hover(

最後使用，你的功能是通過「mtk_submenu_0」作爲一個jQuery選擇器。這將搜索一個類而不是一個id。改變選擇器在前面添加一個「＃」，或者改變你的jquery邏輯爲不需要id（例如，你可以創建選擇器來搜索當前元素的第一個div和ul後裔）

Answer 3

我發現的一件事你的代碼奇怪的是，你提到的第一個div，mtk_submenu_0，在你正在顯示/隱藏的div內，mtk_div_submenu_0。一旦你隱藏了外部div，內部div就不能被'徘徊'，從而阻止它再次顯示。

爲了確保內部的div沒有得到隱蔽，嘗試這樣的事情：

HTML：

<ul id="mtk_main_menu"> 
<li class="mtk_topmenu">Manager Options 
    <div id="mtk_div_submenu_0"> 
     <ul id="mtk_submenu_0"> 
      <li class="mtk_submenu">Preferences</li> 
      <li class="mtk_submenu">Employee Options</li> 
     </ul> 
    </div> 
</li> 

的Javascript：

$(document).ready(function() { 
    $('.mtk_topmenu').hover(
     function() { 
      $('#mtk_div_submenu_0').show(); 
     }, 
     function() { 
      $('#mtk_div_submenu_0').hide(); 
     }); 
}); 

因爲你行：

<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0', 'mtk_div_submenu_0');"> 

我假設你正在尋找有mtk_div_submenu_0 DIV顯示/隱藏每當文本Manager Options位於鼠標在。希望這有助於！

Answer 4

通過做你正在做的事情，每次觸發onMouseOver事件時，你都附加了jQuery hover事件。每次你連接另一個監聽者。

相反，在文件準備初始化事件：

$(function() { 
    $("#tk_div_submenu_0").hover(
     function(){ 
      $("#mtk_submenu_0").show(); 
     }, 
     function(){ 
      $("#mtk_submenu_0").hide(); 
     }) 
    ); 
}); 

這將初始化它，當文檔準備好，它會初始化一次。

然後，只需從HTML中刪除onMouseOver事件。

<li class="mtk_topmenu">Manager Options ... </li> 

Answer 5

首先，你要解決這個問題很長。 jQuery有一個內置的切換方法，可以爲你執行顯示/隱藏。其次，您將懸停調用放置在您嘗試懸停播放的項目的子元素上。這是你的代碼的更新版本：

<ul id="mtk_main_menu"> 
    <li class="mtk_topmenu" onMouseOver="showMenu(this,'mtk_div_submenu_0');"> 
     Manager Options 
     <div id="mtk_div_submenu_0"> 
      <ul id="mtk_submenu_0"> 
       <li class="mtk_submenu">Preferences</li> 
       <li class="mtk_submenu">Employee Options</li> 
      </ul> 
     </div> 
    </li> 
</ul> 

JS：

function showMenu(a,b) { 
    var divStr = '#' + a.id + " div"; 
    $(divStr).toggle(); 
} 

我用LI元素上懸停事件，因爲在這種情況下，更有意義。

這是一個小提琴：http://jsfiddle.net/3Ecrq/