为了账号安全,请及时绑定邮箱和手机立即绑定

iphone不支持点击document click的解决方法

标签:
JavaScript
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{width:100%;height:300px;background:green;position: relative;}
        .box a{display:block;width:100%;height:100%;border:1px solid red;}
        .child{position:absolute;width:50%;height:500px;background:yellow;display:none;}
    </style>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('.box a').on('click',function(event){
            if($('.child').css('display')=='none'){
                $('.child').show();
            }else{
                $('.child').hide();
            }
            event.stopPropagation();
        });
        $('.child').on('click touchstart',function(event){
            event.stopPropagation();
        });
        $(document).on('click touchstart',function(){
            $('.child').hide();
        });
    });
    </script>
</head>
<body>
    <div class="box">
        <a>menu1</a>
        <div class="child">
            fdkslafjkdlsajfkdls
        </div>
    </div>
</body>
</html>
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消