导航菜单，showHide插件 + Dropdown 下拉对象
Posted knowledge-is-infinite
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了导航菜单，showHide插件 + Dropdown 下拉对象相关的知识，希望对你有一定的参考价值。
index.js文件
<!DOCTYPE html> <html lang="utf-8"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div class="nav-site"> <div class="container"> <ul class="fl"> <li class="fl"><a href="javascript:;" class="nav-site-login">亲，请登录</a></li> <li class="fl"><a href="javascript:;" class="nav-site-item link">免费注册</a></li> <li class="fl"><a href="javascript:;" class="nav-site-item link">手机逛慕淘</a></li> </ul> <ul class="fr"> <li class="dropdown fl" data-active=‘site‘> <a href="javascript:;" class="dropdown-toggle link">我的慕淘<i class="dropdown-arrow"></i></a> <ul class="dropdown-layer dropdown-left"> <li><a href="javascript:;" class="dropdown-item">已买到宝贝</a></li> <li><a href="javascript:;" class="dropdown-item">我的足迹</a></li> </ul> </li> <li class="dropdown fl" data-active=‘site‘> <a href="javascript:;" class="dropdown-toggle link">收藏夹<i class="dropdown-arrow"></i></a> <ul class="dropdown-layer dropdown-left"> <li><a href="javascript:;" class="dropdown-item">收藏的宝贝</a></li> <li><a href="javascript:;" class="dropdown-item">收藏的店铺</a></li> </ul> </li> <li class="dropdown fl" data-active=‘site‘> <a href="javascript:;" class="dropdown-catorage link">商品分类</a> </li> <li class="dropdown fl" data-active=‘site‘> <a href="javascript:;" class="dropdown-toggle link">卖家中心<i class="dropdown-arrow"></i></a> <ul class="dropdown-layer dropdown-left"> <li><a href="javascript:;" class="dropdown-item">免费开店</a></li> <li><a href="javascript:;" class="dropdown-item">已卖出的宝贝</a></li> <li><a href="javascript:;" class="dropdown-item">出售中的宝贝</a></li> <li><a href="javascript:;" class="dropdown-item">卖家服务市场</a></li> <li><a href="javascript:;" class="dropdown-item">卖家培训中心</a></li> <li><a href="javascript:;" class="dropdown-item">体验中心</a></li> </ul> </li> <li class="dropdown fl" data-active=‘site‘> <a href="javascript:;" class="dropdown-toggle link">联系客服<i class="dropdown-arrow"></i></a> <ul class="dropdown-layer dropdown-right"> <li><a href="javascript:;" class="dropdown-item">消费者咨询</a></li> <li><a href="javascript:;" class="dropdown-item">卖家服务</a></li> </ul> </li> </ul> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"> window.jQuery || document.write(‘<script src="js/jquery.js"><\/script>‘); </script> <script type="text/javascript" src="js/transition.js"></script> <script type="text/javascript" src="js/showHide.js"></script> <script type="text/javascript" src="js/dropdown.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>
base.css文件
/*重置浏览器的默认样式css reset*/ /*清除内外边距*/ body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/ ul, ol, li, dl, dt, dd, /*列表元素*/ form, fieldset, legend, input, button, select, textarea, /*表单元素*/ th, td, /*表格元素*/ pre padding: 0; margin: 0; /*重置默认样式*/ body, button, input, select, textarea /*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/ color: #333; font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif; h1, h2, h3, h4, h5, h6 font-size: 100%; font-weight: normal; em, i font-style: normal; a text-decoration: none; li list-style-type: none; vertical-align: top; img border: none; /*display: block;*/ vertical-align: top; textarea overflow: auto; resize: none; table border-spacing: 0; border-collapse: collapse; /*常用公共样式*/ .fl float: left; display: inline; .fr float: right; display: inline; .cf:before, .cf:after content: " "; display: table; .cf:after clear: both; .cf *zoom: 1;
common.css文件
/* ¹«¹²Ñùʽ */ .container width: 1200px; .link color: #4d555d; .link:hover color: #f01414; /* showHide */ .transition -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; .fade opacity: 0 !important; visibility: hidden !important; .slideUpDown height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; .slideLeftRight width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; /* dropdown */ .dropdown position: relative; .dropdown-toggle display: inline-block; .dropdown-arrow display: inline-block; background-repeat: no-repeat; .dropdown-layer display: none; position: absolute; top: 100%; overflow: hidden; /* .dropdown-item display: block; white-space: nowrap; overflow: hidden; */ .dropdown-left left: 0; right: auto; .dropdown-right left: auto; right: 0;
index.css文件
.nav-site width: 100%; background: #f3f5f7; .nav-site > .container height: 44px; line-height: 44px; margin: 0 auto; border-bottom: 1px solid #cdd0d4; .nav-site-login margin-left: 15px; color: #f01414; .nav-site-item margin-left: 10px; .nav-site .nav-site-item:nth-child(1) margin-right: 16px; /*dropdown*/ /* .dropdown position: relative; */ .dropdown-catorage, .dropdown-toggle /*display: inline-block;*/ padding: 0 16px 0 12px; border-left: 1px solid #f3f5f7; border-right: 1px solid #f3f5f7; /* .dropdown-toggle:hover background: #fff; border-left: 1px solid #cdd0d4; border-right: 1px solid #cdd0d4; */ .dropdown-arrow /*display: inline-block;*/ width: 8px; height: 6px; /*background: url(‘../img/dropdown-arrow.png‘) no-repeat;*/ background-image: url(‘../img/dropdown-arrow.png‘); margin-left: 8px; .dropdown-layer /*display: none;*/ /*position: absolute;*/ /*top: 100%;*/ background: #f3f5f7; border: 1px solid #cdd0d4; border-top: none; /* .dropdown:hover .dropdown-layer, .dropdown:hover .dropdown-toggle background: #fff; .dropdown:hover .dropdown-layer display: block; */ .dropdown-item display: block; height:30px; line-height: 30px; padding-left: 12px; padding-right: 12px; white-space: nowrap; overflow: hidden; color: #4d555d; /* .dropdown-left left: 0; right: auto; .dropdown-right left: auto; right: 0; */ .dropdown-item background: #fff; .dropdown-item:hover background: #f3f5f7; .site-active .dropdown-toggle background: #fff; border-left: 1px solid #cdd0d4; border-right: 1px solid #cdd0d4; .site-active .dropdown-layer /*display: block;*/ background: #fff;
导入jquery文件
导入jquery.js
transitionend.js文件
(function() // ‘use strict‘;//在IE浏览器下，使用严格模式是不能定义多个变量的，所以不能使用严格模式 //判断样式是否支持该浏览器，可以在控制台输出 document.body.style[属性名] = ""; 则支持 //如果返回的 undefined 则不支持。 //因为调用未定义的对象，报错;使用未定义的属性，返回undefined var transitions = ‘-webkit-transition‘:‘webkitTransitionEnd‘, ‘-moz-transition‘:‘mozTransitionEnd‘, ‘-webkit-transition‘:‘webkitTransitionEnd‘, ‘-o-transition‘:‘oTransitionEnd‘, ‘transition‘:‘transitionend‘ ; var value = ‘‘; var isSupport = false; for(var p in transitions) if (document.body.style[p] !== undefined) value = transitions[p]; isSupport = true; break; ; //暴露一个借口对象给外界调用 // window.mt = "" window.mt = undefined 进行隐式转换 都是false // 所以window.mt 只能是一个对象时才返回真 // 与找false,或找true window.mt = window.mt || ; window.mt.transitionend = transition:value, isSupport:isSupport ; )(jQuery)
showHide.js文件
(function() ‘use strict‘; //引用 transitionend 动画结束后执行的事件 var transitionend = window.mt.transitionend.transition; //所有的兼容性写法都可以添加一个附带属性，即表示浏览器是否支持 var isSupport = window.mt.transitionend.isSupport; //公共方法，高内聚低耦合，方法提取最小，所有都有 //初始化$ele对象，判断是否显示并设置对应的状态 function init($ele,callback) if ($ele.is(‘:hidden‘)) $ele.data(‘status‘,‘hidden‘); typeof callback=== ‘function‘ && callback(); else $ele.data(‘status‘,‘shown‘); //公共 show 设置事件开始前的状态并trigger其他事件 function show($ele,callback) if ($ele.data(‘status‘)===‘show‘ || $ele.data(‘status‘)===‘shown‘) return; $ele.data(‘status‘,‘show‘).trigger(‘show‘); typeof callback === ‘function‘ && callback(); //公共 hide 设置事件触发前的状态，并触发其他事件 function hide($ele,callback) if ($ele.data(‘status‘)===‘hide‘ || $ele.data(‘status‘)===‘hidden‘) return; $ele.data(‘status‘,‘hide‘).trigger(‘hide‘); typeof callback === ‘function‘ && callback(); //静静的显示隐藏，没有动画 var silent = init:function($ele) //初始化 init($ele); , show:function($ele) show($ele,function() $ele.show(); $ele.data(‘status‘,‘shown‘).trigger(‘shown‘); ); , hide:function($ele) hide($ele,function() $ele.hide(); $ele.data(‘status‘,‘hidden‘).trigger(‘hidden‘); ); //使用css3显示隐藏的动画 var css3 = fade:// fadeOut fadeIn 淡入淡出 init:function($ele) css3._init($ele,‘fade‘); , show:function($ele) css3._show($ele,‘fade‘); , hide:function($ele) css3._hide($ele,‘fade‘); , slideUpDown: //slideUp slideDown 上下拉动 init:function($ele) //千万记住如果$ele的宽高是由内容撑开，而没有设置固定宽高， //如果设置其中一个属性进行过度，那么一定要在初始化时先获取，且设置其宽高， //才能进行上下拉动或左右拉动的过渡效果，否则是没有过渡效果的显示隐藏 $ele.height($ele.height()); css3._init($ele,‘slideUpDown‘); , show:function($ele) css3._show($ele,‘slideUpDown‘); , hide:function($ele) css3._hide($ele,‘slideUpDown‘); , slideLeftRight: //jquery中没有定义，左右拉动 init:function($ele) //千万记住如果$ele的宽高是由内容撑开，而没有设置固定宽高， //如果设置其中一个属性进行过度，那么一定要在初始化时先获取，且设置其宽高， //才能进行上下拉动或左右拉动的过渡效果，否则是没有过渡效果的显示隐藏 $ele.width($ele.width()); css3._init($ele,‘slideLeftRight‘); , show:function($ele) css3._show($ele,‘slideLeftRight‘); , hide:function($ele) css3._hide($ele,‘slideLeftRight‘); , fadeSlideUpDown: // fadeOut fadeIn + slideUp = slideDown 淡入淡出 + 上下拉动 init:function($ele) //千万记住如果$ele的宽高是由内容撑开，而没有设置固定宽高， //如果设置其中一个属性进行过度，那么一定要在初始化时先获取，且设置其宽高， //才能进行上下拉动或左右拉动的过渡效果，否则是没有过渡效果的显示隐藏 $ele.height($ele.height()); css3._init($ele,‘fade slideUpDown‘); , show:function($ele) css3._show($ele,‘fade slideUpDown‘); , hide:function($ele) css3._hide($ele,‘fade slideUpDown‘); , fadeSlideLeftRight: //fadeOut fadeIn + 左右拉动 init:function($ele) //千万记住如果$ele的宽高是由内容撑开，而没有设置固定宽高， //如果设置其中一个属性进行过度，那么一定要在初始化时先获取，且设置其宽高， //才能进行上下拉动或左右拉动的过渡效果，否则是没有过渡效果的显示隐藏 $ele.width($ele.width()); css3._init($ele,‘slideLeftRight fade‘); , show:function($ele) css3._show($ele,‘slideLeftRight fade‘); , hide:function($ele) css3._hide($ele,‘slideLeftRight fade‘); /*谨记：下面的方法一定要写在 css3对象后面，因为使用的字面的方式定义函数， 浏览器在预解析时，css3._init = null; 如果css3对象不存在就会报错 即：不存在的对象报错，不存在的属性返回undefined*/ // _init 下划线的方法表示，css3对象内部使用的 css3._init = function($ele,className) $ele.addClass(‘transition‘); init($ele,function() $ele.addClass(className); ); // _show 下划线的方法表示，css3对象内部使用的 css3._show = function($ele,className) show($ele,function() $ele.show(); setTimeout(function() $ele.removeClass(className); ,20); $ele.off(transitionend).one(transitionend,function() $ele.data(‘status‘,‘shown‘).trigger(‘shown‘); ); ); // _hide 下划线的方法表示，css3对象内部使用的 css3._hide = function($ele,className) hide($ele,function() $ele.addClass(className); $ele.off(transitionend).one(transitionend,function() $ele.hide(); $ele.data(‘status‘,‘hidden‘).trigger(‘hidden‘); ); ); /*谨记：下面的方法一定要写在 css3对象后面，因为使用的字面的方式定义函数， 浏览器在预解析时，css3._init = null; 如果css3对象不存在就会报错 即：不存在的对象报错，不存在的属性返回undefined*/ //使用原生js进行显示隐藏 var js = fade:// fadeOut fadeIn 淡入淡出 init:function($ele) js._init($ele, ‘opacity‘:‘0‘, ‘visibility‘:‘hidden‘ ); , show:function($ele) js._show($ele, ‘opacity‘:‘1‘, ‘visibility‘:‘visible‘ ); , hide:function($ele) js._hide($ele, ‘opacity‘:‘0‘, ‘visibility‘:‘hidden‘ ); , slideUpDown://slideUp slideDown 上下拉动 init:function($ele) js._init($ele, ‘height‘:‘0‘, ‘padding-top‘:‘0‘, ‘padding-bottom‘:‘0‘ ); , show:function($ele) var styles = $ele.data(‘styles‘); js._show($ele, ‘height‘:styles[‘height‘], ‘padding-top‘:styles[‘padding-top‘], ‘padding-bottom‘:styles[‘padding-bottom‘] ); , hide:function($ele) js._hide($ele, ‘height‘:‘0‘, ‘padding-top‘:‘0‘, ‘padding-bottom‘:‘0‘ ); , slideLeftRight://jquery中没有定义，左右拉动 init:function($ele) js._init($ele, ‘padding-left‘:‘0‘, ‘padding-right‘:‘0‘ ); , show:function($ele) var styles = $ele.data(‘styles‘); js._show($ele, ‘width‘:styles[‘width‘], ‘padding-left‘:styles[‘padding-left‘], ‘padding-right‘:styles[‘padding-right‘] ); , hide:function($ele) js._hide($ele, ‘width‘:‘0‘, ‘padding-left‘:‘0‘, ‘padding-right‘:‘0‘ ); , fadeSlideUpDown:// fadeOut fadeIn + slideUp = slideDown 淡入淡出 + 上下拉动 init:function($ele) js._init($ele, ‘height‘:‘0‘, ‘opacity‘:‘0‘, ‘padding-top‘:‘0‘, ‘padding-bottom‘:‘0‘ ); , show:function($ele) var styles = $ele.data(‘styles‘); js._show($ele, ‘height‘:styles[‘height‘], ‘opacity‘:styles[‘opacity‘], ‘padding-top‘:styles[‘padding-top‘], ‘padding-bottom‘:styles[‘padding-bottom‘] ); , hide:function($ele) js._hide($ele, ‘height‘:‘0‘, ‘opacity‘:‘0‘, ‘padding-top‘:‘0‘, ‘padding-bottom‘:‘0‘ ); , fadeSlideLeftRight: //fadeOut fadeIn + 左右拉动 init:function($ele) js._init($ele, ‘width‘:‘0‘, ‘opacity‘:‘0‘, ‘padding-left‘:‘0‘, ‘padding-right‘:‘0‘ ); , show:function($ele) var styles = $ele.data(‘styles‘); js._show($ele, ‘width‘:styles[‘width‘], ‘opacity‘:styles[‘opacity‘], ‘padding-left‘:styles[‘padding-left‘], ‘padding-right‘:styles[‘padding-right‘] ); , hide:function($ele) js._hide($ele, ‘width‘:‘0‘, ‘opacity‘:‘0‘, ‘padding-left‘:‘0‘, ‘padding-right‘:‘0‘ ); // _init 下划线的方法表示，js对象内部使用的 js._init = function($ele,options) //这里特别注意，如果$ele标签中已经添加 transition 过渡类， //那么使用js时，显示效果就会有异常，所以一定记住这里要移除 $ele.removeClass(‘transition‘); var styles = ; for(var p in options) styles[p] = $ele.css(p); //把值存放在$ele对象中，在显示时可以提取出来使用 $ele.data(‘styles‘,styles); init($ele,function() $ele.animate(options); ) // _show 下划线的方法表示，js对象内部使用的 js._show = function($ele,options) show($ele,function() $ele.show(); setTimeout(function() $ele.stop().animate(options,function() $ele.data(‘status‘,‘shown‘).trigger(‘shown‘); ); ,20); ) // _hide 下划线的方法表示，js对象内部使用的 js._hide = function($ele,options) hide($ele,function() $ele.stop().animate(options,function() $ele.hide(); $ele.data(‘status‘,‘hidden‘).trigger(‘hidden‘); ); ); // 思路： // 1，返回一个对象 // showHide(options) // silentshow,hide // css3.animationshow,hide // js.animationshow,hide // 2， showHide(‘string‘); var defaults = css3:false, js:false, animation:‘fade‘ function showHide($ele,option) var mode = ;//模式 //如果css3=true ,且 支持 transitionend事件才执行 使用css3执行动画 if (option.css3 && isSupport) //如果css3[options.animation]存在，则mode=css3[options.animation],否则等于默认值 mode = css3[option.animation] ? css3[option.animation] : css3[defaults.animation]; else if (option.js) mode = js[option.animation] ? js[option.animation] : js[defaults.animation]; else mode = silent; //初始化 mode.init($ele); return show:$.proxy(mode.show,this,$ele), hide:$.proxy(mode.hide,this,$ele) window.mt = window.mt || ; window.mt.showHide = showHide; //写成插件进行调用 $.fn.extend( showHide:function(options) //插件对象一定返回的是一个对象 //传对象进来时，一定记得遍历，因为有可能是一个数组对象 return $(this).each(function() //注意：这里mode存取值，使用的是单例存取值， var mode = $(this).data(‘mode‘); //$.extend(,a,b,c);处理参数，参数扩展， //后面对象的属性覆盖前面的属性(包括属性值)，最后覆盖空值得到一个新对象 //即：c 覆盖 b 覆盖 a 覆盖 最后得到一个新的对象参数 //typeof options === ‘object‘ && options 如果参数options 为对象，则返回 options, //否则返回false,即：使用defaults 默认值 var option = $.extend(,defaults,typeof options ===‘object‘ && options); //注意：这里mode存取值，使用的是单例存取值， //1,一开始就获取mode=$(this).data(‘mode‘), //2,中间执行一段代码获取 mode //3,如果mode为空，则执行存值，并赋值，否则继续执行 if (!mode) $(this).data(‘mode‘,mode = showHide($(this),option)); //不要使用 typeof options === ‘string‘，因为options[options] 可能是未定义的属性， //所以这里使用 typeof mode[options] === ‘function‘ options是否是 mode 的函数属性 if (typeof mode[options] === ‘function‘) //执行 mode[options](); ); ) )(jQuery)
dropdown.js文件
(function($) function Dropdown(ele,options) //因为这里的参数在下面 init 方法中访问不到， //所以这里把options参数也设置为Dropdown的一个属性，那么就可以通过this进行访问了。 this.options = options; this.$ele = $(ele); //这里不能直接使用 this.eleLayer = $(‘.dropdown-layer‘),这里获取的是所有的下拉层。 this.eleLayer = this.$ele.find(‘.dropdown-layer‘); //判断是否有设定默认值 active ,如果有设定则使用设定好的值，否则使用下拉菜单对象中 data-actvie 的值 //使用下面长句也可以，只是处理参数，都把它们放到了，插件中的 $.extend 方法中一起处理了。这种方法优秀 // this.activeName = options.active !== undefined || this.$ele.data(‘active‘) + ‘-active‘; this.activeName = options.active; //除了Dropdown属性外，其他所有的操作都应该放到init()函数中去，代表初始化 this.init(); Dropdown.prototype.init = function() //初始化 this.eleLayer.showHide(this.options); var self = this; if (this.options.event === ‘click‘) this.$ele.on(‘click‘,function(e) self.show(); //this.$ele 对象有单击事件，而 $(document)也绑定了单击事件，如果没有阻止事件冒泡， //那么会从this.$ele一直父级元素冒泡单击事件，直到window对象， //this.$ele的父级以上只要有单击事件都会触发。所以这里必须阻止事件冒泡 e.stopPropagation(); ) //单击除了 this.$ele对象外的所有地方都会触发 self.hide()事件 $(document).on(‘click‘,function() self.hide(); ) else//除了单击事件其他值默认都是hover事件 this.$ele.hover($.proxy(this.show,this), $.proxy(this.hide,this)); /* this.$ele.hover(function() self.show(); ,function() self.hide(); )*/ //Dropdown本身就是一个对象，所以可以设置属性， //默认参数，都是一个一个添加上去的，只要会变的参数都暴露到插件中给用户自定义。 //在添加参数的思路可以是，从函数里面一步一步向外边推，或者也可以从用户调用参数时开始一步一步传递。 Dropdown.DEFAULTS = css3:false, js:false, animation:‘fade‘, event:‘hover‘, active:‘dropdown‘ //面向对象编程时，一定先找出该对象的方法，然后使用原型链的方式进行声明 //因为在创建多个对象后，原型不会在堆内存中开辟空间存放 方法了， //而是是在原型中向上查找其他对象的方法，进而引用它们的方法。性能最佳。 //所以方法都是存放在原型中，属性都是放在构造函数中。 Dropdown.prototype.show = function() //注意点：本来this.activeName = ‘site-active‘ 即：.site-active中 //使用 display:block;控制显示隐藏的，如果使用了showHide 显示隐藏插件， //一定记住把里面 display 的属性删除掉，这里的类只用于控制样式。 //显示隐藏的操作交给插件 showHide 来控制 this.$ele.addClass(this.activeName); this.eleLayer.showHide(‘show‘); //同上 Dropdown.prototype.hide = function() this.$ele.removeClass(this.activeName); this.eleLayer.showHide(‘hide‘); /* //这里是思路方法写的函数 ，上面面向对象是根据这个函数构造出来的下拉对象 function dropdown(ele) var $ele = $(ele), $eleLayer = $ele.find(‘.dropdown-layer‘); //初始化 $eleLayer.showHide( css3:true, js:false, animation:‘slideLeftRight‘ ); $ele.hover(function() $ele.addClass(‘site-active‘); $eleLayer.showHide(‘show‘); // console.log($eleLayer.showHide(‘show‘)); , function() $ele.removeClass(‘site-active‘); $eleLayer.showHide(‘hide‘); ); */ //把面向对象Dropdown 写成插件的形式被调用 $.fn.extend( dropdown:function(option) return this.each(function() // dropdown(this); //$.extend(,a,b,c);处理参数，参数扩展， //后面对象的属性覆盖前面的属性(包括属性值)，最后覆盖空值得到一个新对象 //即：c 覆盖 b 覆盖 a 覆盖 最后得到一个新的对象参数 var options = $.extend(,Dropdown.DEFAULTS,$(this).data(‘active‘),option); new Dropdown(this,options); ) ) )(jQuery)
index.js文件
//这是最后指定$(‘.dropdown‘)对象调用插件 $(‘.dropdown‘).dropdown( //指定使用哪种方式进行显示隐藏 css3:true, js:false, //具体怎么显示隐藏 animation:‘fadeSlideLeftRight‘, /*默认只给了两个事件，如果不是click,那么其他值默认为hover事件，容错率高，即使传错参数也可以正常运行*/ event:‘cdlick‘, /*index.html中鼠标悬浮在 $(‘.dropdown‘)标签添加的是 site-acitve，如果不是该类 那么就不会在 .dropdown-toggle 添加白色背景，或者可能出现其他异常, 如：使用dropdown整个导航在鼠标一进一出时就会左右移动一点点 ，请注意*/ active:‘site‘ );
以上是关于导航菜单，showHide插件 + Dropdown 下拉对象的主要内容，如果未能解决你的问题，请参考以下文章
php [WordPress插件]导航菜单导出器和导入器/导出和导入导航菜单。需要WordPress导入器插件。
php [WordPress插件]导航菜单导出器和导入器/导出和导入导航菜单。需要WordPress导入器插件。测试高达4.7 - 它w