js

    // 初始化数据
    var initdata = {
        // 节点
        dom_nav: $('.nav'), // 导航
        dom_nav_sub: $('.nav-sub'), // 二级导航
        dom_nav_thr: $('.sec-menu'), // 三级导航
        //
    };

    /**
     * 事件绑定 PC
     */
    var evenbind_pc = function () {
        // 移除事件
        initdata.dom_nav.children().off();
        initdata.dom_nav_sub.off();
        initdata.dom_nav_thr.children().off();

        // 清除 MB => PC 的bug
        initdata.dom_nav.children().each(function () {
            $(this).children('dl').removeClass("active").fadeOut('fast');
        });

        /**
         * 导航鼠标浮入事件
         */
        nav_hover();

        function nav_hover() {
            var timeout;


            initdata.dom_nav.children().mouseover(function () {
                var data_file = $(this).attr("data-file");
                clearTimeout(timeout);
                if (data_file === undefined) {
                    initdata.dom_nav_sub.css({
                        "height": "0"
                    });
                    initdata.dom_nav_sub.removeClass("showSubNav");
                } else {
                    var bigHeight = $(".nav-sub-con[data-name = '" + data_file + "']").outerHeight();
                    $(".nav-sub-con[data-name = '" + data_file + "']").addClass("show").siblings().removeClass("show");
                    initdata.dom_nav_sub.css({
                        "height": bigHeight
                    });
                    initdata.dom_nav_sub.addClass("showSubNav");
                }
            }).mouseout(function () {
                clearTimeout(timeout);
                timeout = setTimeout(function () {
                    initdata.dom_nav_sub.css({
                        "height": "0"
                    });
                    initdata.dom_nav_sub.removeClass("showSubNav");
                    $(".nav-sub-con").removeClass('show');
                }, 300);
            });

            initdata.dom_nav_sub.mouseover(function () {
                clearTimeout(timeout);
                $(this).addClass("showSubNav");
            }).mouseout(function () {
                var _self = this;
                clearTimeout(timeout);
                timeout = setTimeout(function () {
                    $(_self).removeClass("showSubNav");
                    $(_self).css({
                        "height": "0"
                    });
                    $(".nav-sub-con").removeClass('show');
                }, 300);
            });
        }

        /**
         * 二级导航样式调整
         */
        // $(window).load(function () {
        //     var dlWidth = $(".nav li").eq(0).outerWidth() + $(".nav li").eq(1).outerWidth() - 2;
        //     $(".nav-sub li dl").css("left", dlWidth);
        // });
        //
        // $(window).resize(function () {
        //     var dlWidth = $(".nav li").eq(0).outerWidth() + $(".nav li").eq(1).outerWidth() - 2;
        //     $(".nav-sub li dl").css("left", dlWidth);
        // });

        // 三级导航鼠标浮入事件
        initdata.dom_nav_thr.children().mouseover(function () {
            $(this).children('dl').css('display', "block");
        }).mouseout(function () {
            $(this).children('dl').css('display', "none");
        });
    }

    /**
     * 事件绑定 MB
     */
    var evenbind_mb = function () {
        // 移除事件
        initdata.dom_nav.children().off();
        initdata.dom_nav_sub.off();
        initdata.dom_nav_thr.children().off();
        /**
         * 导航鼠标浮入事件
         */
        var timer; // 新添加
        initdata.dom_nav.children().on("click", function () {
            var dom_dl = $(this).children('dl');
            var dom_dd = dom_dl.children('dd'); // 新添加
            if (!dom_dl.hasClass('active')) {
                dom_dl.addClass("active").fadeIn('fast');
                // 新添加
                timer = dom_dd.on('click', function (event) {
                    event.stopPropagation();
                    var dom_ul = $(this).children("ul");
                    var dom_li = dom_ul.children("li").length;
                    if (!dom_ul.hasClass('asd')) {
                        dom_ul.addClass("asd").fadeIn('fast');
                        dom_ul.css({ 'height': dom_li * 40 + 'px' });
                        $(this).css({ 'height': (dom_li + 1) * 40 + 'px' });
                    } else {
                        dom_ul.removeClass("asd").fadeOut('fast');
                        dom_ul.css({ 'height': dom_li * 0 + 'px' });
                        $(this).css({ 'height': '40px' });
                    }
                });
            } else {
                dom_dl.removeClass("active").fadeOut('fast');
                timer.unbind() // 新添加
            }
        });
    }

    /**
     * 视口大小判断
     */
    var judgeViewportIsPC = function () {
        var view_width = window.innerWidth;
        if (view_width > 959) {
            evenbind_pc();  // 事件绑定 PC
        } else {
            evenbind_mb();  // 事件绑定 MB
        }
    }

    /**
     * 应用初始化
     */
    var init_application = function () {
        judgeViewportIsPC();
        $(window).resize(judgeViewportIsPC);
    }
    init_application();


});

 

转载于:https://www.cnblogs.com/Millet-23/p/9647466.html