脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现点击展开隐藏效果

js实现点击展开隐藏效果（实例代码）

 更新时间：2018年09月28日 15:58:25   投稿：laozhang  
本篇文章小编给大家带来一篇关于JS实现点击展开点击隐藏的效果代码内容，有兴趣的朋友参考下。

本章给大家介绍用js事件冒泡实现鼠标点击显示提示框效果（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

先看看效果图：

代码实例：

<!DOCTYPE html>
<html>
 
<head>
 <meta charset="UTF-8">
 <title>事件冒泡-提示框</title>
</head>
<style>
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;
}
</style>
 
<body>
 <button onclick="promptBox('prompt')">显示/隐藏 消息框</button>
 <div id="prompt">
 <div id="prompt-content">
  <h3>我是标题<i onclick="$('#prompt').hide()"></i></h3>
  <hr>
  <p>用一辈子时间去珍藏你，我不知道够不够？当我用坦荡、虔诚、真情，甚至，袒露心怀来“奋笔疾书”这样一份真爱的时候，我知道你的爱或恨已经植入我的骨髓，并刻在了心上。当真心遇到仁心的时候，我相信才会有心心相印一说。而面对一个人华丽转身的时候，所谓的真心和仁心再次相碰，溅出的那段激烈的火花，还会不会重新燃起一份爱的承诺？而我一直想用时间的长度和宽度来验证，把一个人藏在心底到底能藏多久？</p>
 </div>
 </div>
 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script>
 /**
 * [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();
 
 })
 
 }
 </script>
</body>
 
</html>

以上就是本次JS效果的全部内容，感谢大家对脚本之家的支持。

您可能感兴趣的文章:

相关文章

  • JavaScript学习笔记（十）

    JavaScript学习笔记（十）

    今天学习的是window对象，还是有点用的。
    2010-01-01
  • JavaScript实现复制文本到剪切板功能的方法小结

    JavaScript实现复制文本到剪切板功能的方法小结

    这篇文章给大家介绍了三种JavaScript实现复制文本到剪切板的方法,Clipboard API,document.execCommand以及useClipboard这三个接口,文章通过代码示例给大家介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • 前端开发过程中浏览器版本的两种判定方法

    前端开发过程中浏览器版本的两种判定方法

    前端开发过程中经常需要判断浏览器的版本，达到同时兼容多个浏览器的目的，下面有两种不错的常用方法：jquery及HTML中的注释，喜欢的朋友可以参考下
    2013-10-10
  • ES6中定义类和对象的方法示例

    ES6中定义类和对象的方法示例

    这篇文章主要介绍了ES6中定义类和对象的方法,结合实例形式分析了ES6中类的定义、继承、静态方法、静态属性等相关操作技巧,需要的朋友可以参考下
    2019-07-07
  • JavaScript里 ==与===区别详解

    JavaScript里 ==与===区别详解

    这篇文章主要介绍了JavaScript里 ==与===区别详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-08-08
  • JS实现表单中点击小眼睛显示隐藏密码框中的密码

    JS实现表单中点击小眼睛显示隐藏密码框中的密码

    这篇文章主要介绍了JS实现表单中点击小眼睛显示隐藏密码框中的密码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下
    2020-04-04
  • JavaScript中iframe实现局部刷新的几种方法汇总

    JavaScript中iframe实现局部刷新的几种方法汇总

    Iframe是一种嵌入网页的框架形式，Web页面可以通过更改嵌入的部分，达到部分内容刷新，通过本文和大家一起学习iframe实现局部刷新的几种方法汇总，对iframe局部刷新相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • JavaScript 事件对象的实现

    JavaScript 事件对象的实现

    前我写过一篇关于JavaScript如何实现面向对象编程的文章。今天，我写这篇文章跟大家讨论一下，如何实现事件。
    2009-07-07
  • JavaScript简单实现的仿微博留言功能示例

    JavaScript简单实现的仿微博留言功能示例

    这篇文章主要介绍了JavaScript简单实现的仿微博留言功能,涉及javascript页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-01-01
  • JavaScript实现基于十进制的四舍五入实例

    JavaScript实现基于十进制的四舍五入实例

    这篇文章主要介绍了JavaScript实现基于十进制的四舍五入的方法,实例分析了javascript针对数值判断与相关运算技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07

最新评论