用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/