jq冒泡之——点击其他地方隐藏

e.stopPropagetion();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
    <style>
        ul,li{padding:0;margin:0;}
        li{list-style: none;}
        .member-grounp{width:200px;height:200px;background:green;}
        .member-grounp li span{width:50px;height:50px;background:red;display:block;}
        /*挂断，发言，移除*/
        .b_main{position:absolute;left:50%;top:50%;width:88px;}
        .out{
            position:absolute;
            top:7px;
            border-color:transparent #d9d9d9 transparent transparent;
            border-style:dashed dashed solid dashed;
            border-width:8px;
        }
        .dashed{
            position:absolute;
            border-color:transparent #ffffff transparent transparent;
            border-style:dashed dashed solid dashed;
            border-width:8px;
            top:-8px;
            left:-6px;
        }
        .mem-operation{
            position:relative;
            border:1px solid #d9d9d9;
            padding:5px 0;
            left:16px;
            border-radius:5px;
            background:white;
        }
        .mem-operation li{border-bottom:1px solid #d9d9d9;height:40px;line-height:40px;position:relative;text-align:right;cursor:pointer;padding:0 10px;}
        .mem-operation li:last-child{border:0;}
        .mem-operation li i{display:block;width:27px;height:23px;position:absolute;top:50%;margin-top:-11px;z-index: 2;}
        .mem-operation li i.hangupI{background: url(../images/meeting.png) no-repeat;background-position:-143px -24px;}
        .mem-operation li i.speakI{background: url(../images/meeting.png) no-repeat;background-position:-143px -48px;}
        .mem-operation li i.removeI{background: url(../images/meeting.png) no-repeat;background-position:-143px -80px;}
    </style>
</head>
<body>
    <ul class="member-grounp">
        <li>
            <span class="m-icon"></span>
        </li>
    </ul>
    <div class="b_main" id="meetingSet" style="display:none;">
        <ul class="mem-operation">
            <li><i class="hangupI" style=""></i>挂断</li>
            <li><i class="speakI"></i>发言</li>
            <li><i class="removeI"></i>移除</li>
        </ul>
        <div class="out">
            <div class="dashed"></div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    $(".member-grounp").on('click',"li .m-icon",function (ev) {
        var omeetingSet = document.getElementById("meetingSet");
        // 获取event对象，兼容性写法
        var ev = ev || event;
        //判断显示
        omeetingSet.style.display="block";
        var mouseDownX = ev.clientX;
        var mouseDownY = ev.clientY;
        omeetingSet.style.left = mouseDownX+"px";
        omeetingSet.style.top = mouseDownY+"px";

        $(document).on("click", function(){
            omeetingSet.style.display="none";
        });
        ev.stopPropagation();
    });
    $(".member-grounp").on('click',"li",function (ev) {
        var ev = ev || event;
        ev.stopPropagation();
    });
</script>

posted @ 2017-01-06 18:01  最爱小虾  阅读(269)  评论(0)  编辑  收藏  举报