所以我目前正在开发下拉列表菜单,正如您可能怀疑的那样......我是一个非常新手。 我希望这样当我打开下拉菜单时,当我将鼠标悬停或单击它之外时,下拉菜单应该再次隐藏。 怎么可能做到这一点?我在 Stackoverflow 上尝试了一些技巧,但遗憾的是没有一个对我有用。
正如您在下面看到的,它是 onclick="toggle_visibility"
对于我的名为(ID)“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{
position:relative;
left:90px;
top: 17px;
width: 225px;
height: 150px;
display:none;
font-size: 25px;
background-color: #304749;
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>
最佳答案
看到这段代码,我已经使用了悬停事件
/*
$( "#menu" ).hover(
function() {
$( "#droppy" ).show();
}, function() {
$( "#droppy" ).hide();
}
);
*/
$("#menu").on("click",function(){
$( "#droppy" ).show();
});
$( "#droppy" ).hover(
function() {
}, function() {
$( "#droppy" ).hide();
}
);
#nav #droppy{
position:relative;
left:90px;
top: 17px;
width: 225px;
height: 150px;
display:none;
font-size: 25px;
background-color: #304749;
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>
关于javascript - 单击外部/悬停在外部时关闭的下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44184603/