1.做到點(diǎn)擊按鈕開啟浮層
$("#favorite").on('click', function() {
$("#popover").show()
})
2.做到點(diǎn)擊按鈕開啟浮層，再次點(diǎn)擊關(guān)閉浮層
$("#favorite").on('click', function() {
if (popover.style.display == 'block') {
$("#popover").hide()
} else {
$("#popover").show()
}
})
3.做到點(diǎn)擊別處關(guān)閉浮層
function listenToDocument() {
$(document).on('click', function(e) {
if (e.target === $('html')[0]) {
$popover.hide()
// 只在浮層出現(xiàn)時(shí)監(jiān)聽擅腰，節(jié)約資源
$(document).off('click', arguments.callee)
}
})
}
4.最終做到
-點(diǎn)擊按鈕彈出浮層
-點(diǎn)擊別處關(guān)閉浮層
-點(diǎn)擊浮層時(shí)，浮層不得關(guān)閉
-再次點(diǎn)擊按鈕，浮層消失點(diǎn)擊按鈕彈出浮層
最終代碼
let $favorite = $("#favorite")
let $popover = $("#popover")
$favorite.on('click', function(e) {
if (popover.style.display == 'block') {
$popover.hide()
} else {
$popover.show()
listenToDocument()
}
})
function listenToDocument() {
$(document).on('click', function(e) {
if (e.target === $('html')[0]) {
$popover.hide()
// 只在浮層出現(xiàn)時(shí)監(jiān)聽，節(jié)約資源
$(document).off('click', arguments.callee)
}
})
}
以下為HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="navbar">
<button id="favorite">
收藏夾
</button>
<div id="popover" class="popover">
<ul>
<li>百度一下</li>
<li>谷歌一下</li>
<li>Bing一下</li>
</ul>
</div>
</div>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
.navbar {
position: relative;
display: inline-block;
left: 100px;
top: 100px;
}
.popover {
position: absolute;
border: 1px solid black;
left: 0;
top: 100%;
white-space: nowrap;
display: none;
}
ul li {
list-style-type: none;
margin: 5px;
}
li:hover {
background-color: #e5dbdb;
}
