zoukankan      html  css  js  c++  java
  • 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();
    
    
    });
  • 相关阅读:
    javascript中有关this的解析题
    变量声明
    js事件
    js用法
    dom对象
    数据的三大储存格式
    函数
    全局环境
    循环语句及案例
    条件语句
  • 原文地址:https://www.cnblogs.com/Millet-23/p/9647466.html
Copyright © 2011-2022 走看看