纯js通过点击子元素关闭或隐藏父元素

js关闭父元素.jpg

本文将告诉你如何使用纯JS(javascript)实现点击元素时将父元素关闭,这段代码非常实用可以用在弹窗、浮层、对话框,而且代码亦较为简短,无需加载多余js,当然使用Jquery实现关闭父元素也很简单,这段代码比较适合用于页面js交互较少的页面,可以使用纯js减少js库加载,提升访问速度。

代码

<a href="javascript:" onclick="javascript:this.parentNode.parentNode.style.display='none';"></a>

将设定在a标签被点击时onclick将父元素关闭

演示代码

<div class="box">
    <p>点击.close会将父元素.box一同关闭</p>
    <a href="javascript:" onclick="javascript:this.parentNode.parentNode.style.display='none';" class="close">确定</a>
</div>

演示

页内演示
点击这里隐藏文章内容

去codepen.io查看演示
查看关闭父元素在线演示

转载请注明转自:一极乐http://yijile.com/log/399.html


话题相关文章

话题标签

JavaScript

一极乐 为乐趣而生

《纯js通过点击子元素关闭或隐藏父元素》  发表时间:  最后更新时间:

谁来过

不知子曰邀请你对本文不足说出你的看法!

有 2 条评论

  1. 不知子曰

    js我也挺“业余”的,有些效果一段代码就能解决无需太多思考

  2. Gryu

    一点都不懂怎么办?




博主推荐专题

佛学资料Typecho模版代码乐知道CSS百度CyanogenMod
搜索引擎提交入口说祝福


关闭

标签云

一极乐 衷心接受你的建议

TOP