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

鸿硕最近几天折腾了一个问题很久,终于实现了所需的功能,记录如下:
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>
上面的代码在本地调试,没有引入wordpress系统,可以正常实现功能,效果如下图:
但是在wordpress系统中却无法实现这个功能,问题出现在移动端时,‘点击顶级菜单并没有弹出相应子菜单,而是直接到达了顶级菜单链接所写的地址处,折叠菜单隐藏了’。
让移动端点击顶级菜单链接无效的功能鸿硕亲测无影响,鸿硕感觉可能是引入导航插件实现wordpress中使用bootstrap导航功能时出的问题,暂时没有时间详细研究他。
第二种方法,这种方法也是鸿硕几年前使用过的老的方法,现在依然好用,代码记录如下:
<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>
在wordpress系统中完美实现了想要的功能,效果如下图:
时间仓促,写的不够详细,如有不妥,可以加群交流,IT互联网交流656992002,也可以直接联系我交流,联系方式见页面底部。

给TA打赏
共{{data.count}}人
人已打赏
jquery教程

mouseover和mouseenter的区别

2021-10-15 11:40:46

jqueryjs

jquery判断元素是否存在

2021-11-15 9:47:15

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索