当我将鼠标悬停在链接上时下拉菜单关闭答案

【问题标题】：Drop down menu closes when i hover on links当我将鼠标悬停在链接上时下拉菜单关闭
【发布时间】：2014-05-04 06:15:47
【问题描述】：

我创建了一个下拉菜单

<a href="#" onMouseOver="showMenu('portfolio')"  class="navationlinks">Portfolio</a>

<div id="menu2" onMouseOut="closeMenu()" class="menu">
                    <a href="heave.php">2D</a><br>
                    <a href="#">3D</a><br>
                    <a href="#">Video</a><br>
                    <a href="#">SketchBook</a>
                </div>

我的脚本工作正常，但是当我将鼠标悬停在 div 元素内的链接上时，div 会关闭。

我的 JavaScript ..

function showMenu(x){
    if(x == 'portfolio'){//mouse over to portfolio link
        document.getElementById("menu2").style.display = 'block';//display drop down menu
    }
    else if(x == 'profile'){//mouse over to profile link
        document.getElementById("menu3").style.display = 'block';//display drop down menu
    }   
}

function closeMenu(){
    document.getElementById("menu2").style.display = 'none';
    document.getElementById("menu3").style.display = 'none';    
}

在我进入 div 元素之前，它保持打开状态，但是当我将鼠标悬停在该 div 元素内的链接上时，它会关闭。

对此的任何解决方案。将鼠标悬停在该 div 元素内的链接上时如何保持打开状态

【问题讨论】：

标签： javascript html css

【解决方案1】：

只需用另一个div 包装您提供的整个HTML，并将showMenu('portfolio') 函数分配给它，而不是将其分配给链接。在这里查看：http://jsfiddle.net/j2QLt/2/

这是我使用的 HTML：

<div onMouseOver="showMenu('portfolio')">
    <a href="#" class="navationlinks">Portfolio</a>
    <div id="menu2" onMouseOut="closeMenu()" class="menu">
        <a href="heave.php">2D</a><br />
        <a href="#">3D</a><br />
        <a href="#">Video</a><br />
        <a href="#">SketchBook</a>
    </div>
</div>

编辑：或者你可以使用onMouseEnter和onMouseLeave代替onMouseOver和onMouseOut，像这样：http://jsfiddle.net/j2QLt/4/

<a onMouseEnter="showMenu('portfolio')" href="#" class="navationlinks">Portfolio</a>
<div id="menu2" onMouseLeave="closeMenu()" class="menu">
    <a href="heave.php">2D</a><br />
    <a href="#">3D</a><br />
    <a href="#">Video</a><br />
    <a href="#">SketchBook</a>
</div>

【讨论】：

【解决方案2】：

类似的东西？

$(document).on('click', function(e) {
    var elem = $(e.target).closest('#PortfolioLink'),
    box = $(e.target).closest('#Menu2');
 if (elem.length) {
    e.preventDefault();
    $('#Menu2').toggle();
   } else if (!box.length) {
       $('#Menu2').hide();
    }
 });

【讨论】：

在 javascript 中不是 jquery