1 回答

TA貢獻1856條經驗 獲得超11個贊
通過使用 jQuery,您可以綁定到文檔單擊事件,并在單擊的元素不是容器本身或 div 元素的后代時隱藏 div 容器。
var container = $("#sub-menu");
if (!container.is(event.target) && !container.has(event.target).length) {
container.hide();
}
如果您想隱藏該容器而不測試容器本身或 div 元素的后代,只需刪除條件并簡單地使用container.hide();.
另外,不要在 CSS 中設置,而是display: none;手動sub-menu設置,這樣您就可以sub-menu從第一次單擊時進行切換。
看看下面的片段:
var x = document.getElementById("sub-menu");
x.style.display = "none";
$(document).click(function (evt) {
if ($(evt.target).is('#main-menu')) { // control click event if it's main-menu
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
else {
var container = $("#sub-menu");
if (!container.is(event.target) && !container.has(event.target).length) { // if you don't want that remove the condition and write container.hide(); only
container.hide();
}
}
});
#main-menu {
display: inline-block;
height: 20px;
width: 100px;
background: blue;
padding: 5%;
}
#sub-menu {
display: inline-block;
height: 50px;
width: 50px;
background: red;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div id="main-menu">Main menu</div>
<div id="sub-menu" class="sub-menu-class">Sub menu</div>
添加回答
舉報