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

我认为，只要文本mtk_div_submenu_0被鼠标悬停，您就希望Manager Options 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有一个内置的切换方法，可以为您执行show / hide。其次，您将悬停调用放在您尝试在悬停时显示的项目的子元素上。这是您的代码的更新版本：

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

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

5 个答案: