实现当导航栏显示时点击导航栏外的任何地方关闭导航栏

hyx 2019-03-04 11:08:11 268次 2

这个功能并不难实现,现仅是记录一下方便以后参考



$("body").not("#nav")是关键,除了导航栏外的其他地方 一开始是想点击其他地方后就直接再次触发 $('.mobile_wrap'),即导航栏显示按钮,这样做到重用,方便快速……,但这样做会触发两次$("body").not("#nav"),所以后来就将导航栏显示隐藏功能写成函数形式





/*手机端导航栏显示隐藏*/
    var mobile_show=false;  //导航栏 显示
    var wrap_c=false;  //允许点击其他地方 也关闭
    $('.mobile_wrap').click(function (e) {
        nav_s_h();
        if(mobile_show){
            /*其他地方点击也关闭*/
            $("body").not("#nav").not('.mobile_wrap').click(function (even) {
                /*出现两次触发的情况*/
                if(wrap_c){
                    nav_s_h();
                    even.stopPropagation();
                }
            });
        }
        e.stopPropagation();
    });

    function nav_s_h() {
        if($('.mobile_wrap i').hasClass("icon-iconmore")){
            $('.mobile_wrap i').addClass('icon-weibiao45133');
            $('.mobile_wrap i').removeClass('icon-iconmore');
            mobile_show=true;
            wrap_c=true;
        }else{
            $('.mobile_wrap i').removeClass('icon-weibiao45133');
            $('.mobile_wrap i').addClass('icon-iconmore');
            wrap_c=false;
            mobile_show=false;
        }
        $("#nav").slideToggle();
    }


发表评论

注:*为必填

回复 的评论
*
选择
*
*