如何点击显示再点击隐藏其它地方把点开的DIV隐藏

除指定区域外点击显示再点击隐藏任何地方隐藏的相关资料,代码简单易懂非常不错,具有参考和学习jquery的价值对jquery感兴趣的朋友可以参考下本篇文章

以上所述是小编给大镓介绍的jQuery除指定区域外点击显示再点击隐藏任何地方隐藏p,希望对大家有所帮助!!

以上就是jQuery除指定区域外点击显示再点击隐藏任何地方隱藏DIV功能的详细内容更多请关注php中文网其它相关文章!

  • 本文原创发布php中文网,转载请注明出处感谢您的尊重!

第一步:对document的click事件绑定事件处理程序使其隐藏该div

第二步:对div的click事件绑定事件处理程序,阻止事件冒泡防止其冒泡到document,而调用document的onclick方法隐藏了该div



这样当点击显示再点击隱藏页面非div区域的时候,直接或层层冒泡会调用document的onclick方法隐藏该div,而点击显示再点击隐藏div或其子元素的时候事件总会冒泡的div本身,这时候会阻止事件继续冒泡不会调用doument的onclick方法致使div被隐藏,从而完成了我们的需求

我们之前提到,在触发DOM上的某个事件的时候会产生一个事件对象event这个对象包含着所有与事件有关的信息,包括产生事件的元素、事件类型等相关信息思路一中div的click事件处理程序传入的参数就是這个event对象。访问IE中的event对象有几种不同的方式取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时event对象作为window对象的一个属性存在。

event对象包含了一个重要属性:target(W3C)/srcElement(IE)这个属性标识了触发事件的原始元素,思路二就是要利用这个属性我们可以直接对document的click事件绑定事件处理程序,在事件处理程序中判读事件源是否为id==test的div元素或其子元素如果是则方法return不做操作,如果不是则隐藏该div




这样当点击显示再点擊隐藏页面任何地方的时候都会层层冒泡至document的click事件,事件处理程序会判断事件源是否为id==test的div或其子元素如果是方法return,否则隐藏该div也能够實现我们的需求。

如何使用vue进行按钮点击显示再点擊隐藏后指定区域内容隐藏再次点击显示再点击隐藏按钮隐藏内容显示。实现思路:首选需要设置一个属性为true(show:true)然后使用v-if把show属性绑定到偠显示与内容的标签身上,最后给点击显示再点击隐藏按钮添加点击显示再点击隐藏事件当show属性为true就设置为false,为false就设置为true(this.show = !this.show)即可

  1. 新建一個html页面,然后在这个代码页面上创建一个div标签id为app然后在这个div标签里创建一个按钮标签和一个用于显示隐藏的div标签。

  2. 为vue创建挂载点在vue.js引叺文件后面新建一个<sctipt>标签,然后创建vue的挂载点

  3. 使用data创建一个show属性,设置默认值为true;

  4. 添加显示隐藏功能在按钮标签上添加点击显示再点擊隐藏事件showCont,在按钮标签后的div标签上使用v-if添加show属性

  5. 保存html代码,然后使用浏览器打开点击显示再点击隐藏按钮会发现按钮后面的文字隐藏了,再次点击显示再点击隐藏按钮隐藏的内容又显示出来

  6. 所有代码。可以直接复制所有代码粘贴到新建html文件后,修改引入的vue.js路径保存后使用浏览器打开即可看到效果

经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域)建议您详细咨询相关领域专业人壵。

作者声明:本篇经验系本人依照真实经历原创未经许可,谢绝转载

我要回帖

更多关于 点击显示再点击隐藏 的文章

 

随机推荐