做完我发现隐藏出了问题
就是点了隐藏以后，SlideUpDownd动画 得先等下拉层完全卷上去，a标签里的内容才会消失，问题出在哪，代码可能很多，jquery我就不贴上来了。我调试了很久还是不行，所以请老师解答
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<link rel="stylesheet" href="../css/base.css">
<!-- <link rel="stylesheet" href="../font/iconfont.css"> -->
</head>
<style>
/* 公共部分 */
body{
background: #f5f5f5;
}
.dropdown{
position: relative;
}
.dropdown-toggle{
display: block;
height: 100%;
position: relative;
z-index: 2;
}
.dropdown-arrow{
background-repeat:no-repeat;
display: inline-block;
vertical-align: middle;
}
.dropdown-left{
left: 0;
right: auto;
}
.dropdown-right{
right: 0;
left: auto;
}
.dropdown-layer{
position: absolute;
display: none;
z-index: 1;
}
/* menu部分 */
.menu.dropdown{
position: relative;
}
.menu .dropdown-toggle{
display: block;
height: 100%;
padding: 0 16px 0 12px; /*top right bottom left*/
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
position: relative;
z-index: 2;
}
.menu .dropdown-layer{
position: absolute;
display: none;
top: 100%;
background: #ffffff;
border:1px solid #cdd0d4;
}
.menu .menu-item{
height: 30px;
line-height: 30px;
padding: 0 12px;
white-space: nowrap;
color: #8a8e93;
display: block;
}
.menu-active .dropdown-toggle{
background: #ffffff;
border-color: #cdd0d4;
}
.menu-active .icon-arrowdown{
transform:rotate(180deg);
}
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1572423692566'); /* IE9 */
src: url('iconfont.eot?t=1572423692566#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1572423692566') format('woff'),
url('iconfont.ttf?t=1572423692566') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1572423692566#iconfont') format('svg'); /* iOS 4.1- */
}
.icon{
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-49:before {
content: "\e631";
}
.icon-38:before {
content: "\e623";
}
.icon-shenghuohuafeichongzhi:before {
content: "\e647";
}
.icon-arrowdown:before {
content: "\e61a";
font-size: 12px;
}
.icon-woyaozhongchou:before {
content: "\e810";
}
.icon-wechat:before {
content: "\e63b";
}
.icon-jipiao:before {
content: "\e61b";
}
.icon-message:before {
content: "\e78a";
}
.icon-cart:before {
content: "\e63c";
}
.icon-shoucang:before {
content: "\e613";
}
.icon-shouji:before {
content: "\e604";
}
.icon-game-----:before {
content: "\e609";
}
.icon-weixingongzhonghao:before {
content: "\e612";
}
.icon-train:before {
content: "\e861";
}
.transition{
-o-transition:all 0.5s;
-ms-transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
transition: all 0.5s;
}
.fadeOut{
opacity: 0!important;
visibility: hidden!important;
}
.SlideUpDownCollapse{
height: 0!important;/* 设置更高优先级 */
padding-top: 0!important;
padding-bottom:0!important;
}
.SlideLeftRightCollapse{
width: 0!important;
padding-left: 0!important;
padding-right: 0!important;
}
</style>
<body>
<!-- <div class="dropdown fl">
<div class="dropdown-toggle link">收藏夹<i class="dropdown-arrow"></i></div>
<div class="dropdown-layer dropdown-left">
</div>
</div> -->
<li class="menu dropdown fl" data-active='menu'>
<a href="#" class="dropdown-toggle link">收藏夹
<i class="icon icon-arrowdown dropdown-arrow"><!--  兼容IE6--></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="#" target="_blank" class="menu-item">收藏的宝贝</a></li>
<li><a href="#" target="_blank" class="menu-item">收藏的店铺</a></li>
</ul>
</li>
<li class="menu dropdown fl" data-active='menu'>
<a href="#" target="_blank" class="dropdown-toggle link">收藏夹<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="#" target="_blank" class="menu-item">收藏的宝贝</a></li>
<li><a href="#" target="_blank" class="menu-item">收藏的店铺</a></li>
</ul>
</li>
<button id="btn-show">点我显示</button>
<button id="btn-hide">点我隐藏</button>
<script src="../js/jquery.js"></script>
<script src="../js/transition.js"></script>
<script src="../js/showHide.js"></script>
<script src="../js/dropdown.js"></script>
<script type="text/javascript">
$('.dropdown').on('dropdown-shown',function(a){
console.log(a.type);
})
/*$('.dropdown').on('dropdown-show',function(e){
$.getJSON('dropdown.json',function(data){
console.log(data);
console.log(1);
})
})*/
$('.dropdown').dropdown({
event:'hover',
css3:true,
js:true,
delay:400,
animation : 'slideUpDown',
/*active:'menu'*/
});
$('#btn-show').on('click',function(){
$('.dropdown').dropdown('show');
});
$('#btn-hide').on('click',function(){
$('.dropdown').dropdown('hide');
});
</script>
</body>
</html>//transition.js
//transition 兼容性问题
(function(){
var transitionEndName = {
transition:'transitionend',
Moztransition:'transitionend',
Webkittransition:'WebkitTransitionEnd',
OTransition:'otransitionend'
}
var transitionEnd='',
isSupport = false;
;
for (name in transitionEndName){
if( document.body.style[name] !== undefined){
transitionEnd = transitionEndName[name];
isSupport = true;
break;
}
}
window.mt = window.mt || {};
window.mt.transition = {
end:transitionEnd,
isSupport:isSupport
}
})();//showHide.js
(function ($) {
'use strict';
var transition = window.mt.transition ;
function init($elem,hiddenCallback){//init函数 给Box一个初始状态（status) hidden/show
if($elem.is(':hidden')){//:hidden 是jquery中的选择器，选取隐藏的元素。经过测试 没有:shown
$elem.data('status','hidden');
if(typeof hiddenCallback === 'function') hiddenCallback();
}else {
$elem.data('status','shown');
}
}
function show($elem,callback){
if($elem.data('status') ==='show') return;
if($elem.data('status') ==='shown') return;
$elem.data('status','show').trigger('show');
callback();
}
function hide($elem,callback){
if($elem.data('status') ==='hide') return;
if($elem.data('status') ==='hidden') return;
$elem.data('status','hide').trigger('hide');
callback();
}
var slient ={
init:init,
show:function($elem){
show($elem,function(){
$elem.show();
$elem.data('status','shown').trigger('shown');
})
},
hide:function($elem){
hide($elem,function(){
$elem.hide();
$elem.data('status','hidden').trigger('hidden');
})
}
};
var css3 ={
fade:{
init:function($elem){
css3._init($elem,'fadeOut');
},
show:function($elem){
css3._show($elem,'fadeOut');
},
hide:function($elem){
css3._hide($elem,'fadeOut');
}
},
slideUpDown:{
init:function($elem){
$elem.height($elem.height());//p标签撑开不会提供高度 height方法为box提供高度
css3._init($elem,'SlideUpDownCollapse');
},
show:function($elem){
css3._show($elem,'SlideUpDownCollapse');
},
hide:function($elem){
css3._hide($elem,'SlideUpDownCollapse');
}
},
slideLeftRight:{
init:function($elem){
$elem.width($elem.width());
css3._init($elem,'SlideLeftRightCollapse');
},
show:function($elem){
css3._show($elem,'SlideLeftRightCollapse');
},
hide:function($elem){
css3._hide($elem,'SlideLeftRightCollapse');
}
},
fadeSlideUpDown:{
init:function($elem){
$elem.height($elem.height());//p标签撑开不会提供高度 height方法为box提供高度
css3._init($elem,'fadeOut SlideUpDownCollapse');
},
show:function($elem){
css3._show($elem,'fadeOut SlideUpDownCollapse');
},
hide:function($elem){
css3._hide($elem,'fadeOut SlideUpDownCollapse');
}
},
fadeSlideLeftRight:{
init:function($elem){
$elem.width($elem.width());//p标签撑开不会提供高度 height方法为box提供高度
css3._init($elem,'fadeOut SlideLeftRightCollapse');
},
show:function($elem){
css3._show($elem,'fadeOut SlideLeftRightCollapse');
},
hide:function($elem){
css3._hide($elem,'fadeOut SlideLeftRightCollapse');
}
},
};
css3._init = function($elem,className){
$elem.addClass('transition');
init($elem,function(){
$elem.addClass(className);
})
}
css3._show = function($elem,className){
show($elem,function(){
$elem.off(transition.end).one(transition.end,function(){//one只绑定一次，避免多次绑定
$elem.data('status','shown').trigger('shown');//触发shown事件
})
$elem.show();
setTimeout(function(){
$elem.removeClass(className);
},20) //异步处理 避免同时发生
})
}
css3._hide=function($elem,className){
hide($elem,function(){
$elem.off(transition.end).one(transition.end,function(){//transistionend方法 等动画结束执行
$elem.hide();
$elem.data('status','hidden').trigger('hidden');
})
$elem.addClass(className);
})
}
var js = {
fade:{
init:function($elem){
js._init($elem);
},
show:function($elem){
js._show($elem,'fadeIn');
},
hide:function($elem){
js._hide($elem,'fadeOut');
}
},
SlideUpDown:{
init:function($elem){
js._init($elem);
},
show:function($elem){
js._show($elem,'slideDown');
},
hide:function($elem){
js._hide($elem,'slideUp');
}
},
SlideLeftRight:{
init:function($elem){
js._customInit($elem,{
'width':0,
'padding-left':0,
'padding-right':0
})
},
show:function($elem){
js._customerShow($elem);
},
hide:function($elem){
hide($elem,function(){
$elem.stop().animate({
'width':0,
'padding-left':0,
'padding-right':0
},
function(){
$elem.hide();
$elem.data('status','hidden').trigger('hidden');
})
//show() hide() 顺序问题 show()先撑开再推动 hide()先推动再关闭
})
}
},
fadeSlideUpDown:{
init:function($elem){
js._customInit($elem,{
'opacity' :0,
'height':0,
'padding-top':0,
'padding-bottom':0
})
},
show:function($elem){
js._customerShow($elem);
},
hide:function($elem){
hide($elem,function(){
$elem.stop().animate({
'opacity' :0,
'height':0,
'padding-top':0,
'padding-bottom':0
},
function(){
$elem.hide();
$elem.data('status','hidden').trigger('hidden');
})
//show() hide() 顺序问题 show()先撑开再推动 hide()先推动再关闭
})
}
},
fadeSlideLeftRight:{
init:function($elem){
js._customInit($elem,{
'opacity' :0,
'width':0,
'padding-left':0,
'padding-right':0
})
},
show:function($elem){
js._customerShow($elem);
},
hide:function($elem){
js._customHide($elem,{
'opacity' :0,
'width':0,
'padding-left':0,
'padding-right':0
});
}
}
};
js._init =function($elem,hiddenCallback){
$elem.removeClass('transition');
init($elem,hiddenCallback);
}
js._customInit =function($elem,options){ //自定义初始化函数
var styles={};
for(p in options){
styles[p]=$elem.css(p);
}
$elem.data('styles',styles);//用于存储最初box的sytles数据
js._init($elem,function(){
$elem.css(options);
})
}
js._show =function($elem,mode){
show($elem,function(){
$elem.stop()[mode](function(){//fadeIn结束后执行该函数 触发shown stop()方法是jquery封装的 用于停掉之前的动画 避免重叠
$elem.data('status','shown').trigger('shown');
})
})
};
js._customerShow=function($elem){
show($elem,function(){
$elem.show();
$elem.stop().animate($elem.data('styles'),
function(){
$elem.data('status','shown').trigger('shown');
})
})
};
js._hide = function($elem,mode){
hide($elem,function(){
$elem.stop()[mode](function(){
$elem.data('status','hidden').trigger('hidden');
})
})
};
js._customHide=function($elem,options){
hide($elem,function(){
$elem.stop().animate(options,
function(){
$elem.hide();
$elem.data('status','hidden').trigger('hidden');
})
//show() hide() 顺序问题 show()先撑开再推动 hide()先推动再关闭
})
};
var defaults ={
css3:false,
js:false,
animation:'fade'
}
/* function showHide($elem,options){
options = $.extend({},default,options);
if(options.css3 && transistion.isSupport){//css3 transition
css3[options.animation].init($elem);
return{
show:css3[options.animation].show,
hide:css3[options.animation].hide
}
}else if(options.js){//js animation
js[options.animation].init($elem);
return{
show:js[options.animation].show,
hide:js[options.animation].hide
}
}else{
slient.init($elem);
return{
show:slient.show,
hide:slient.hide
}
}
}*/
function showHide($elem,options){//修改版
var mode =null;
if(options.css3 && transition.isSupport){//css3 transition
mode=css3[options.animation];//css3.fade()
}else if(options.js){//js animation
mode=js[options.animation];
}else{
mode=slient;
}
mode.init($elem);
return{//调用后返回对象
show:$.proxy(mode.show,this,$elem),//proxy方法用来改变this指向，这里仅用于传参
hide:$.proxy(mode.hide,this,$elem)
}
}
/* window.mt = window.mt ||{};
window.mt.showHide =showHide;*/
$.fn.extend({//为JQuery添加插件 showHide
showHide:function(option){
return this.each(function(){//$box可能是数组 所以需要each遍历
var $this =$(this),
options = $.extend({},defaults,typeof option === 'object' && option),
mode = $this.data('showHide')//如果option是对象 传入option 如果option不是对象 返回False
if(!mode){//如果data为Null则为mode赋值 ，避免重复赋值
$this.data('showHide',mode =showHide($this,options));//mode 纸行showHide函数 return返回show hide
}
if(typeof mode[option] ==='function'){//如果传入字符串'show','hide' 则mode.hide() mode=showHide($this,options)
mode[option]();//showHide.show() 使用[]是因为传入字符串'show'
}
})
}
})
})(jQuery);//dropdown.js
(function($){
'use strict';
function Dropdown(element,option){
this.$elem = $(element),//使用this指向dropdown 让Dropdown.prototype.show也能共用 如果用var 只能是局部变量 外部（Dropdown.prototype.show）无法访问
this.option = option, //外部也能调用
this.$layer=this.$elem.find('.dropdown-layer'),
this.activeClass = option.active +'-active';
this._init();
}
Dropdown.prototype._init =function(){
var self =this;//变量self 存储dropdown对象 避免下面this指向this.$elem(dom元素)
this.$layer.showHide(this.option);//调用showhide 传入option
this.$layer.on('show shown hide hidden',function(e){//showHide 117行触发shown 所以才能绑定!
self.$elem.trigger('dropdown-'+e.type);
console.log(e.type);
})
var DEFAULTS ={//默认参数
css3:false,
js:false,
animation:'fade',
delay:0,
active:'dropdown'
}
if(this.option.event === 'click'){
this.$elem.on('click',function(e){
console.log(e);//e保存事件类型
self.show(); //相当于Dropdown.show();
e.stopPropagation();//阻止该事件（'click'）冒泡
});
$(document).on('click',function(){
self.hide();
})
}else{
this.$elem.hover($.proxy(this.show,this),$.proxy(this.hide,this));//$.proxy方法改变this指向
}
}
Dropdown.prototype.show =function(){
var self = this;
if(this.option.delay){
this.timer =setTimeout(function(){//里面的this需要改成self 否则指向window
_show();
},this.option.delay)
}else{
_show();
}
function _show(){
self.$layer.showHide('show');
self.$elem.addClass(self.activeClass);
}
};
Dropdown.prototype.hide = function(){
if(this.option.delay){
clearTimeout(this.timer);//清除 否则还会触发setTimeout
}
this.$layer.showHide('hide');
this.$elem.removeClass(this.activeClass);
};
/* var dropdown = new Dropdown();//不在函数内部创建对象 避免多次实例化造成性能浪费 所以采用原型
dropdown.show();
dropdown.hide();
*/
/*function dropdown(element,option){
var $elem = $(element),
$layer=$elem.find('.dropdown-layer'),
activeClass = $elem.data('active')+'-active';
$layer.showHide(option);
$elem.hover(function(){
$layer.showHide('show');
$elem.addClass(activeClass);
},function(){
$layer.showHide('hide');
$elem.removeClass(activeClass);
})
}*/
/*var defaults = {//默认参数 如果外部没有传 使用默认
css3:false,
js:false,
animation:'fade'
}*/
$.fn.extend({
dropdown:function(option){//在html 传入的option有可能是对象object{} 也有可能是字符串'string'
return this.each(function(){
var $this=$(this),//存储变量 避免重复调用
dropdown=$this.data('dropdown'),//创建data数据
options = $.extend({},Dropdown.DEFAULTS,$this.data(),typeof option === 'object'
&& option)//判断传入的是不是对象 如果是就进行覆盖
/*dropdown(this,options);*/
if(!dropdown){ //判断是不是空的 如果是就实例化
$this.data('dropdown',dropdown = new Dropdown(this,options))//xxx = new object 立即执行Dropdown)//use data to 存储dropdown 避免每次调用函数多次实例化
}
if (typeof dropdown[option] === 'function'){//判断是不是函数 是就执行
dropdown[option]();// 因为传入option是字符串 所以用[option]
}
})
}
})
})(jQuery)//$参数接收jquery//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;
}5
收起
正在回答
1回答
同学你好，给类名为dropdown-layer的元素设置溢出隐藏就可以了。
代码参考：
同学可以测试下。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星