鼠标点击时隐藏java代码,js实现点击展开隐藏效果（实例代码）
本章給大家介紹用js事件冒泡實現鼠標點擊顯示提示框效果(代碼實例)。有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
先看看效果圖：
代碼實例：
事件冒泡-提示框button {
width: 160px;
height: 30px;
background-color: #ff0000;
color: #fff;
border: 1px solid #000;
}
#prompt{
display: none;
border: 1px solid #000;
padding: 20px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
max-width: 600px;
min-width: 300px;
border-radius: 6px;
background-color: #fff;
}
#prompt #prompt-content h3{
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
}
#prompt #prompt-content h3 i{
display: inline-block;
width: 26px;
height: 26px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADQklEQVRYR7WXWahPURTGf9ccZXpAUu4DkQdFxhKRMSKz0M0YQsiDojwYIykPcuNmzjw9ECFDyiwiU1GEQskcMvZd63Ace599Dveul3//vdZe33f2XtMu4KfUB/YBx4ClwCdbL6+fbsBp4GsB0MKAGxraA2A8cKIc0JsDK4C+wBSgWAS0MNsBth2YDLwpAyI1gCXAVKCi+XsIFIqAZAKwGqiSAHsCDAPO/geJrsBmoFHMx11gMHAzIiBdB2A/0CAB9g1YDCwAvuQgUhNYBYxJ7FkLzAA+aj1OQP/rAUeAVg6gK8BA4FEGEoUWV01itt+BScC6+P4kAemqATuAAQ6g1/ZFB1JIdLGTrBOz+QyMsEz7Y6uLQGSwCJjnAVoOzHHoFEvFsUCTyTugP3DS5SuNgOzHASWOq5JuvQWvjlZ+RHhuAuQZoJy/5TuxEAHtG2VRXMHhZLddyRZgUEIv0J6AMskrWQho81BgG1DJ4ekVUDuxfgHoBShmUiUrATnRPapcR4XE5/gq0NnuPoT/VxqGNgyxDPGRELgKT/DLI6A8JxDtUS4r0l1yEVAalhaZLJKXgGqE0klV0ycqZGo2qqBByUNAfeIQ0D3oFVRudVJByUqgsoH3CHr8bbAQmB+yz0IgDXyWZYcCzyXTrMt6eWQhsMdaZ9LJBquU6nqXgaYOFMVBb2tMThIhAuoFKrFJ0ejWRyOVKdT1lAHxBhTteQ+0BW67GKQRGAlsdfSBO0B7x6TU0TKkqgPosZF4mtT5CPgKznOgTcpMUARs8lz4dUvfD3G9i0Br4Dyg4IuLjruT6dKCe5f1DpeNdMPTCNQFbgDRhBy31eC6MpRWgIJSX9vYYzvRWnypOn4C1YFTdlfJvceBPDVAMaJB1tXC9eZQ2p6LE1CVO+gBeWFvB91/HvFlkHy8tA+9rxNQj99rBcUFoMDSwJFX5FsnqtbskntAOxnJ+WiPkRqL8v1fRU8+vQFqeRxMF4GWwGFH4KmANAuNVBmYjbX5MW6q94WeZiVREIrpUSMTGc60h0UGjKDJJasfMnxr7fqMKwt2Av2Aa4DqgSbeshANKYoHFSHNiqXgSQL6r7RZZk9nZUVZyhpgI6CB9Zf8AAbklp4kaj9vAAAAAElFTkSuQmCC');
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
#prompt #prompt-content p{
text-align: justify;
font-size: 16px;
}
顯示/隱藏 消息框
我是標題
用一輩子時間去珍藏你，我不知道夠不夠？當我用坦蕩、虔誠、真情，甚至，袒露心懷來“奮筆疾書”這樣一份真愛的時候，我知道你的愛或恨已經植入我的骨髓，并刻在了心上。當真心遇到仁心的時候，我相信才會有心心相印一說。而面對一個人華麗轉身的時候，所謂的真心和仁心再次相碰，濺出的那段激烈的火花，還會不會重新燃起一份愛的承諾？而我一直想用時間的長度和寬度來驗證，把一個人藏在心底到底能藏多久？
/**
* [promptBox 需要點擊執行顯示隱藏的按鈕和需要顯示的內容添加停止點擊冒泡事件，為document添加點擊隱藏事件]
* @param {[String]} boxId [顯示/隱藏的消息提示框]
*/
function promptBox(boxId) {
// 獲取Id
var boxId = $("#" + boxId);
// 顯示/隱藏
$(boxId).toggle();
// 停止點擊冒泡事件
var e = arguments.callee.caller.arguments[0] || event;
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
// 顯示/隱藏消息提示框
$(boxId).click(function(event) {
// 停止點擊冒泡事件
var e = arguments.callee.caller.arguments[0] || event;
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
})
// document點擊隱藏事件，不需要清除冒泡事件
$(document).click(function() {
$(boxId).hide();
})
}
以上就是本次JS效果的全部內容，感謝大家對腳本之家的支持。
總結
以上是生活随笔為你收集整理的鼠标点击时隐藏java代码,js实现点击展开隐藏效果（实例代码）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ustc小道消息20211216
- 下一篇： ustc小道消息20211215