使用javascript在ul中隐藏/显示div

让我先说我知道这是一个重复，但我无法通过查看以前的答案找到解决方案，所以我希望有人能解释我在这方面做错了什么

这是php脚本输出的菜单的一部分：

管理器选项

首选项
员工选项

将以下内容作为脚本，在悬停其父容器时应显示每个子菜单

功能显示菜单（a、b）{
$（a）.悬停(
函数（）{
$（b）.show（）；
},
函数（）{
$（b）.隐藏（）；
})
}

Javascript和CSS是我的弱点，有人能告诉我我的问题在哪里吗？我觉得onMouseOver没有像我期望的那样工作。不过我仍在学习操作DOM，请耐心等待，谢谢

---

编辑以反映missingno的建议

您使用单个字符串参数而不是两个字符串参数调用事件处理程序。试着改变

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_子菜单_0”作为jquery选择器。这将搜索类而不是id。更改选择器以在前面添加“#”，或将jquery逻辑更改为不需要id（例如，您可以创建选择器来搜索当前元素的第一个div和ul后代。

我发现您的代码有一点很奇怪，就是您提到的第一个div，

mtk\u子菜单\u 0

，位于您正在显示/隐藏的div，

mtk\u子菜单\u 0

中。一旦您隐藏了外部div，内部div就无法显示。）e“悬停在上方”，因此防止再次显示

要确保内部div不被隐藏，请尝试以下操作：

HTML:

因为你的线路：

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

---

我假设您希望在文本

Manager Options

鼠标悬停时显示/隐藏

mtk\u div\u子菜单0

div。希望这会有所帮助！

通过执行您正在执行的操作，每次触发

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>

管理器选项

---

首先，您要解决这个问题。jQuery有一个内置的切换方法，可以为您执行显示/隐藏。其次，您要将hover调用放在您试图在hover上显示的项的子元素上。下面是您的代码的更新版本：

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

我在

LI

元素上使用了hover事件，因为它在本例中更有意义

---

这里有一个小标题：

对于简单的场景，我宁愿不使用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>

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

那就行了

小提琴：

编辑

如果你真的想走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>

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

JS

#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;
}

#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;*/
}

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");
            });
        }

---

Fiddle:

已修复，仍然没有什么，但感谢您指出这一点！编辑：还将参数更改为文字字符串，仍然没有什么！这比我尝试过的任何其他方法都更接近我，并且感谢您提供的js免费版本，我真诚地希望尽可能避免使用它！没错，Fiddle还附带了js版本-以防万一。

#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;*/
}

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");
            });
        }