专业网站建设品牌,十四年专业建站经验,服务6000+客户--广州京杭网络
免费热线:400-683-0016      微信咨询  |  联系我们

jQuery - click点击显示隐藏,同时点击其它空白区域隐藏_js/jQuery

当前位置:网站建设 > 技术支持
资料来源:网络整理       时间:2023/3/4 0:57:15       共计:3606 浏览

点击显示隐藏,之前分享过几篇文章了:

0、jQuery(最优)点击切换显示隐藏状态,点击显示隐藏菜单,.click切换

1、jQuery点击显示隐藏(简单)

2、jQuery:点击显示隐藏、横向淡入淡出

3、jQuery 点击显示隐藏CSS - toggleClass() 方法

4、即插即用 点击 下拉菜单 javascript

5、案例:jQuery文本段落展开和折叠效果/点击查看更多、点击隐藏(*)

6、即插即用:JS 点击“显示全部”、点击隐藏/折叠部分区域文字 - 特效代码

都是关于点击显示隐藏的,但都没有明确的分享:click点击隐藏展开后,点击网页其它空白区域自动隐藏功能

$(function () {
 $("#admin").on("click", function(e){
     $(".admin").show(100);
     $(document).one("click", function(){
   $(".admin").hide(100);
  });
  e.stopPropagation();
 });
 $(".admin").on("click", function(e){
     e.stopPropagation();
 });
});

HTML

<div id="admin">点击图标</div>
<div class="admin">展开隐藏区域</div>

此时,点击#admin,即可显示.admin,同时,点击网页其它空白区域,也能自动隐藏掉.admin

版权说明:
本网站凡注明“广州京杭 原创”的皆为本站原创文章,如需转载请注明出处!
本网转载皆注明出处,遵循行业规范,如发现作品内容版权或其它问题的,请与我们联系处理!
欢迎扫描右侧微信二维码与我们联系。
·上一条:Font Awesome 图标字体库最简单教程 - 使用方法!_CSS学习 | ·下一条:CSS 三角形对话框(带边框)- :before + :after + border_CSS学习

Copyright © 广州京杭网络科技有限公司 2005-2025 版权所有    粤ICP备16019765号 

广州京杭网络科技有限公司 版权所有