点击一个按钮显示div，点击div之外的地方div隐藏，点击div之内的地方div不隐藏[通俗易懂]

大家好，欢迎来到IT知识分享网。

在做前端开发的时候，经常用到点击按钮显示一个div，点击div之外的地方div隐藏，点击div之内的地方和点击按钮，div不隐藏，使用阻止浏览器冒泡的原理实现。

 <div class="menu_list" style="display:none">
                <ul class="por">
                    <li class="Mli1 mancustom">人工客服</li>
                    <li class="Mli2">
                        <a href="http://www.dfham.com/service/index.html" target="_blank">
                            客户服务
                        </a>
                    </li>
                    <li class="Mli3">订阅号
                        <div class="downcode downcode1  poa none">
                            <img src="images/subscription.png" alt="">
                        </div>
                    </li>
                    <li class="Mli4">服务号
                        <div class="downcode downcode2 poa none">
                            <img src="images/service.png" alt="">
                        </div>
                    </li>
                    <li class="Mli5">APP
                        <div class="downcode downcode3 poa none">
                            <img src="images/app.png" alt="">
                        </div>
                    </li>
                </ul>
            </div>

 // 阻止冒泡
        function stopPropagation(e) {
            var ev = e || window.event;
            if (ev.stopPropagation) {
                ev.stopPropagation();
            }
            else if (window.event) {
                window.event.cancelBubble = true;//兼容IE
            }
        }
        // 订阅号
        $(".Mli3").on("click", function (e) {
            $(".downcode1").show();
            $(".downcode2").hide();
            $(".downcode3").hide();
            stopPropagation(e);
        });
        $(document).bind('click', function () {
            $(".downcode1").hide();
        });
        $(".downcode1").click(function (e) {
            stopPropagation(e);
        });
        // 服务号
        $(".Mli4").on("click", function (e) {
            $(".downcode2").show();
            $(".downcode1").hide();
            $(".downcode3").hide();
            stopPropagation(e);
        });
        $(document).bind('click', function () {
            $(".downcode2").hide();
        });
        $(".downcode2").click(function (e) {
            stopPropagation(e);
        });
        // app
        $(".Mli5").on("click", function (e) {
            $(".downcode3").show();
            $(".downcode1").hide();
            $(".downcode2").hide();
            stopPropagation(e);
        });
        $(document).bind('click', function () {
            $(".downcode3").hide();
        });
        $(".downcode3").click(function (e) {
            stopPropagation(e);
        });
    };