点击空白区域关闭某个元素框

鸿硕最近几天折腾了一个问题很久，终于实现了所需的功能，记录如下：
bootstrap的导航菜单，移动端时点击按钮后折叠的导航栏显示，再点击按钮时折叠的导航栏隐藏，鸿硕想实现点击空白区域也能隐藏折叠的导航栏，但是点击折叠导航栏区域（比如折叠导航栏中点击顶级菜单弹出子菜单的点击操作）折叠导航栏不会隐藏。

实现这个功能鸿硕本次使用了两种方法，第一种方法在本地测试一切正常，但是放入wordpress系统中（同时使用bootstrap导航）却不能实现所需的效果，代码如下：

<script>

    $(function() {

        $(".navbar-toggler").click(function(e) {

            $(".navbar-collapse").slideToggle(250);

            $(document).one("click", function() {

                $(".navbar-collapse").hide(250);

            });

            e.stopPropagation();

        });

        $(".navbar-collapse").on("click", function(e) {

            e.stopPropagation();

        });

    })

</script>

<script>

    $(document).ready( function() {

        $(".navbar-toggler").click(function(e) {

            e.stopPropagation();

            $("#collapsibleNavbar").slideToggle(250);

            // $(document).one("click", function(event) {

            $(document).on("click", function(event) {

                var _con = $("#collapsibleNavbar"); //设置目标区域

                //_con.has(event.target).length的作用：用来判断点击的位置是否在目标区域的子元素上，也就是事件对象是不是目标区域的子元素，常用在点击弹窗区域外弹窗消失的代码中。_con.is(e.target)用来判断点击位置是否在目标区域内，如果不在，则返回false;否则true

                if(!_con.is(event.target) && _con.has(event.target).length ===0 ){

                    $("#collapsibleNavbar").hide(250);

                }

            });

        });

</script>

时间仓促，写的不够详细，如有不妥，可以加群交流，656992002，也可以直接联系我交流，联系方式见页面底部。