Question

我创建了一个下拉菜单

<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元素内的链接上时，我怎么能保持开放状态

Answer 1

只需将您提供的整个HTML包装在另一个div中，然后将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/ < / p>

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

Answer 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();
    }
 });

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

2 个答案: