【jQuery】点击按钮 元素显示 再点击元素以外部分隐藏该元素

发布时间:2019-05-28 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了【jQuery】点击按钮 元素显示 再点击元素以外部分隐藏该元素脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

图片描述

  1. 点击按钮.phone-download 定位需要显示的元素位置
  2. 显示元素#phone-tips
  3. 点击空白处或者自身,隐藏元素
$(function(){
            // app下载提示
            $(".phone-download").click(function(event) {
                event.stopPRopagation(); 
                // 定位位置
                VAR pd = $(this).offset();
                $("#phone-tips").css({top: pd.top + 22,left: pd.left - 160});
                //按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。    
                $('#phone-tips').show(); 
                //点击空白处或者自身隐藏弹出层    
                 $(document).click(function (event) { $('#phone-tips').fadeOut(300) });    
                 $('#phone-tips').click(function (event) {  
                     $(this).fadeOut(300);
                     event.stopPropagation();   
                 });  
            });    
        })

点击空白处关闭弹窗

$(document).mouseup(function(e){
  var _con = $(' 目标区域 ');   // 设置目标区域
  if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
    some code...   // 功能代码
  }
});
/*
判断点击事件发生在区域外的条件是:
1. 点击事件的对象不是目标区域本身
2. 事件对象同时也不是目标区域的子元素
*/

脚本宝典总结

以上是脚本宝典为你收集整理的【jQuery】点击按钮 元素显示 再点击元素以外部分隐藏该元素全部内容,希望文章能够帮你解决【jQuery】点击按钮 元素显示 再点击元素以外部分隐藏该元素所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。