關閉點擊外部/懸停在外面的下拉菜單

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>