关闭点击外部/悬停在外面的下拉菜单

Question

因此，我目前正在研究一个下拉列表菜单，正如您可能怀疑的那样...我很新手。 我希望这样做，当我打开下拉菜单时，以便当我悬停或单击它外面时，dropmenu应该再次隐藏。 怎样才能做到这一点？我已经在Stackoverflow上尝试了一些技巧，但是没有一个可以为我工作。

正如你可以看到下面，它是我叫（ID）下拉菜单中的onclick="toggle_visibility"“droppy”它有一个默认的display:none;所以当我点击<a>标签它打开“droppy” /下拉菜单。但是如果在外部悬停或者只是单击外部时它会再次关闭。这两种解决方案对我来说都是好的=）如果有人知道，请帮助。谢谢！

function toggle_visibility(id) { 
 
    var e = document.getElementById(id); 
 
    if(e.style.display == 'block') 
 
     e.style.display = 'none'; 
 
    else 
 
     e.style.display = 'block'; 
 
    }

#nav #droppy{ 
 
\t position:relative; 
 
\t left:90px; 
 
\t top: 17px; 
 
\t width: 225px; 
 
\t height: 150px; 
 
\t display:none; 
 
\t font-size: 25px; 
 
\t background-color: #304749; 
 
\t border-bottom: 1.6px solid black; 
 
}

<div id="nav"> 
 
    <div id="fall"> 
 
    <a href="#" ="javascript:void(0)" onclick="toggle_visibility('droppy');">Menu</a> 
 
    </div> 
 
    <div id="droppy"> 
 
    <a href="airplanes">Våra Flygplan</a> 
 
    </div> 
 
</div>

Answer 1

见下面的代码。添加了单击事件以打开菜单和鼠标事件以隐藏。

$('#fall a').mouseout(function() { 
 
    $('#droppy').hide(); 
 
}).click(function(){ 
 
$('#droppy').show(); 
 
});

#nav #droppy{ 
 
\t position:relative; 
 
\t left:90px; 
 
\t top: 17px; 
 
\t width: 225px; 
 
\t height: 150px; 
 
\t display:none; 
 
\t font-size: 25px; 
 
\t background-color: #304749; 
 
\t border-bottom: 1.6px solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="nav"> 
 
    <div id="fall"> 
 
    <a href="#" ="javascript:void(0)">Menu</a> 
 
    </div> 
 
    <div id="droppy"> 
 
    <a href="airplanes">Våra Flygplan</a> 
 
    </div> 
 
</div>

Answer 2

看到这个代码，我使用了悬停事件

/* 
 
$("#menu").hover(
 
    function() { 
 
    $("#droppy").show(); 
 
    }, function() { 
 
    $("#droppy").hide(); 
 
    } 
 
); 
 
*/ 
 
$("#menu").on("click",function(){ 
 
    $("#droppy").show(); 
 
}); 
 

 
$("#droppy").hover(
 
    function() { 
 
    
 
    }, function() { 
 
    $("#droppy").hide(); 
 
    } 
 
);

#nav #droppy{ 
 
\t position:relative; 
 
\t left:90px; 
 
\t top: 17px; 
 
\t width: 225px; 
 
\t height: 150px; 
 
\t display:none; 
 
\t font-size: 25px; 
 
\t background-color: #304749; 
 
\t border-bottom: 1.6px solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="nav"> 
 
    <div id="fall"> 
 
    <a href="#" ="javascript:void(0)" id="menu">Menu</a> 
 
    </div> 
 
    <div id="droppy"> 
 
    <a href="airplanes">Våra Flygplan</a> 
 
    </div> 
 
</div>