使用JavaScript在UL中隐藏/显示div

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

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

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 2

我对您的代码感到奇怪的是，您提到的第一个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');">

我假设您希望在鼠标悬停在文本Manager Options时显示/隐藏mtk_div_submenu_0 div。 希望这会有所帮助！

Answer 3

通过执行您的操作，每次触发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 4

首先，您要走很长的路要走这个问题。 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/

Answer 5

对于简单的情况，我宁愿不要使用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/