老师帮我看下，自己练习下拉有几个问题

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<li class="fl"><a href="javascript:;" class="link nav-site-welcome">欢迎来到中国移动网站</a></li>

</ul>

<a href="javascript:;" class="link nav-site-item nav-site-item-qr">中国移动客户端</a>

</ul>

</li>

<li class="dropdown fl"><a href="javascript:;" class="link-active nav-site-item">能力开放商店</a></li>

<li class="dropdown fl"><a href="javascript:;" class="link nav-site-item">关于中国移动</a></li>

<li class="dropdown fl"><a href="javascript:;" class="link nav-site-item">ENGLISH</a></li>

</ul>

</div>

<li><a href="javascript:;" class="dropdown-title">湖北<span class="link-blue dropdown-span">[返回全部省份]</span></a></li>

</ul>

</div>

</form>

</div>

</body>

</html>

.nav-site{

width: 100%;

background-color: #f5f5f5;

}

.nav-site .container{

height: 30px;

line-height: 30px;

}

.nav-site-welcome,

.nav-site-login{

margin-right: 20px;

}

.nav-site-item{

display: block;

margin-left: 20px;

line-height: 30px;

}

.nav-site-item-qr{

background: url(../img/phone.png) no-repeat center;

width: 120px;

line-height: 30px;

text-align: center;

}

.dropdown-item-qr{

display: block;

position: absolute;

left: 50%;

margin-left: -40px;

background: url(../img/qrcode.png) no-repeat center center;

width: 100px;

height: 100px;

border: 1px solid rgba(0,0,0,.15);

border-radius: 4px;

box-shadow: 0 2px 12px rgba(0,0,0,.2);

}

.header{

width: 100%;

height: 88px;

background-color: #fff;

margin-top: 20px;

}

.header-logo{

display: block;

background: url(../img/header-logo.png) no-repeat;

width: 230px;

height: 42px;

}

.header-search{

position: relative;

border: 1px solid #3eb4fa;

}

.search-inputbox{

width: 418px;

height: 32px;

line-height: 32px;

border: none;

padding: 0 10px;

}

.search-btn{

width: 80px;

height: 32px;

background-color: #3eb4fa;

color: #fff;

border: none;

font-size: 16px;

}

.header .dropdown{

margin-left: 20px;

}

.dropdown-toggle{

top: 20px;

position: relative;

font-size: 18px;

}

.header .dropdown-layer{

background-color: #fff;

min-width: 400px;

padding: 0 10px;

position: absolute;

margin-top: 20px;

padding-top: 10px;

padding-bottom: 10px;

border: 1px solid rgba(0,0,0,.15);

border-radius: 4px;

box-shadow: 0 2px 12px rgba(0,0,0,.2);

}

.dropdown-item,

.dropdown-span,

.dropdown-title{

padding: 10px;

line-height: 26px;

}

.dropdown-layer{

display: none;

}

/*公共*/

.container{width: 1200px;margin: 0 auto;}

.link{color: #808080;}

.link:hover{color: #3eb4fa;}

.link-active{color: #e40077;}

.link-blue{

color: #0085d0;

font-weight: bold;

}

.dropdown{

position: relative;

}

.transiton{

-o-transition: all .5s;

-ms-transition: all .5s;

-webkit-transition: all .5s;

-moz-transition: all .5s;

transition: all .5s;

}

.slideUpDown{

height: 0 !important;

padding-top: 0 !important;

padding-bottom: 0 !important;

}

.slideLeftRight{

width: 0 !important;

padding-left: 0 !important;

padding-right: 0 !important;

}

@font-face {

font-family: "iconfont";

src: url('../font/iconfont.eot?t=1477124206');

/* IE9*/

src: url('../font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('../font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */

url('../font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

url('../font/iconfont.svg?t=1477124206#iconfont') format('svg');

/* iOS 4.1- */

}

.icon {

font-family: "iconfont" !important;

font-size: 14px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;

}

(function($){

function Dropdown(elem,options){

this.$elem=$(elem);

this.options=options

this.activeClass=this.$elem.data('active')+'-active'

this.$layer=this.$elem.find('.dropdown-layer')

this.$layer.showHide(this.options)

var self=this;

this.$elem.hover(function(){

self.show()

},function(){

self.hide()

})

}

Dropdown.prototype.show=function(){

var self=this;

self.$elem.addClass(self.activeClass)

self.$layer.showHide('show')

console.log('show')

}

Dropdown.prototype.hide=function(){

var self=this;

self.$elem.removeClass(self.activeClass)

self.$layer.showHide('hide')

}

Dropdown.DEFAULTS={

css3:true,

js:true,

animation:'slideUpDown'

}

$.fn.extend({

dropdown:function(option){

return this.each(function(){

var options=$.extend({},Dropdown.DEFAULTS,typeof option==='object'&&option)

var dropdownData=$(this).data('dropdownData')

if(!dropdownData){

$(this).data('dropdownData',dropdownData=new Dropdown(this,options))

}

if(typeof dropdownData[option]==='function'){

dropdownData[option]();

}

})

}

})

$('.dropdown').dropdown()

})(jQuery)

(function($){

var transition=window.overall.transition

var silent={

init:function($elem){

if($elem.is(':hidden')){

$elem.data('status','hidden')

}else{

$elem.data('status','shown')

}

show:function($elem){

if($elem.data('status')==='show') return

if($elem.data('status')==='shown') return

$elem.data('status','show').trigger('show')

$elem.show()

$elem.data('status','shown').trigger('shown')

hide:function($elem){

if($elem.data('status')==='hide') return

if($elem.data('status')==='hidden') return

$elem.data('status','hide').trigger('hide')

$elem.hide()

}

var css3={

slideUpDown:{

init:function($elem){

$elem.height($elem.height())

$elem.addClass('transition')

if($elem.is(':hidden')){

$elem.data('status','hidden')

$elem.addClass('slideUpDown')

}else{

$elem.data('status','shown')

}

show:function($elem){

if($elem.data('status')==='show') return

if($elem.data('status')==='shown') return

$elem.data('status','show').trigger('show')

$elem.show()

$elem.off(transition.end).one(transition.end,function(){

$elem.data('status','shown').trigger('shown')

})

setTimeout(function(){

$elem.removeClass('slideUpDown')

},20)

hide:function($elem){

if($elem.data('status')==='hide') return

if($elem.data('status')==='hidden') return

$elem.data('status','hide').trigger('hide')

$elem.off(transition.end).one(transition.end,function(){

$elem.hide()

$elem.data('status','hidden').trigger('hidden')

console.log('hidden')

})

$elem.addClass('slideUpDown')

}

var js={

slideUpDown:{

init:function($elem){

$elem.removeClass('transition')

if($elem.is(':hidden')){

$elem.data('status','hidden')

}else{

$elem.data('status','shown')

}

show:function($elem){

if($elem.data('status')==='show') return

if($elem.data('status')==='shown') return

$elem.data('status','show').trigger('show')

$elem.stop().slideDown(function(){

$elem.data('status','shown').trigger('shown')

})

hide:function($elem){

if($elem.data('status')==='hide') return

if($elem.data('status')==='hidden') return

$elem.data('status','hide').trigger('hide')

$elem.stop().slideUp(function(){

$elem.data('status','hidden').trigger('hidden')

})

}

var defaults={

css3:false,

js:true,

animation:'slideUpDown'

}

function showHide(elem,options){

var ani={}

if(options.css3&&transition.isSupport){

ani=css3[options.animation]||css3[defaults.animation]

}else if(options.js){

ani=js[options.animation]||js[defaults.animation]

}else{

ani=silent

}

ani.init(elem)

return{

show:$.proxy(ani.show,this,elem),

hide:$.proxy(ani.hide,this,elem)

}

$.fn.extend({

showHide:function(option){

return this.each(function(){

var options=$.extend({},defaults,typeof option==='object' && option)

var showHideData=$(this).data('showHideData')

if(!showHideData){

$(this).data('showHideData',showHideData=showHide($(this),options))

}

if(typeof showHideData[option]==='function'){

showHideData[option]();

}

})

}

})

})(jQuery)

(function(){

var transitionEndEventName={

transition:'transitionend',

MozTransition:'transitionend',

WebkitTransition:'webkitTransitionEnd',

OTransition:'oTransitionEnd'

}

var transitionend=''

var isSupport=false

for(var name in transitionEndEventName){

if(document.body.style[name]!=undefined){

transitionend=transitionEndEventName[name]

isSupport=true

break;

}

window.overall=window.overall||{}

window.overall.transition={

end:transitionend,

isSupport:isSupport

}

})()

布局里，相对定位绝对定位我感觉比较混乱，老师能详细说下吗，

还有我页面里的logo旁边的地址，我一直想让下拉在它底部，但是我那个动画slideUpDown动画的起始是在文字的上方，然后往下，感觉不对劲

然后那个中国移动客户端下拉会显示二维码，没有下拉的动画

页面里，js的slideUpDown可以用，css3的slideUpDown有问题

慕粉1905369247 2020-04-22

源自：实战：站点导航组件化 3-5 让菜单下拉

收起

7回答

好帮手慕码回答被采纳获得+3积分 2020-04-23 10:56:40

同学你好，解答如下：

（1）transiton这个属性没有生效是因为在js中，类名写错了：

样式设置是可以的；

（2）没有高度是因为设置了固定定位，脱离文档，父级塌陷。建议去掉固定定位：

（3）shown这步是执行的。可以给下拉菜单添加属性，实现过渡效果：

如果同学有其他问题的话，建议新建提问，以便后期对于问题的归纳和总结。

祝学习愉快~

收起回答

提问者慕粉1905369247 2020-04-22 21:30:46

我这里高度是0，所以导致没有动画？

这一步好像没起作用

收起回答

提问者慕粉1905369247 2020-04-22 21:24:26

我里面写了个

应该和transition：height .3s差不多

收起回答

提问者慕粉1905369247 2020-04-22 21:23:24

没有下拉动画效果，应该是没有到shown这里

但是不知道为什么

收起回答

好帮手慕码 2020-04-22 21:06:11

同学你好，请问同学现在的问题是“css3的动画是可以下拉出来，但是收不回去”是吗？可以在.header .dropdown-layer中添加transition: height 0.3s; 这样又有了过渡的效果、下拉菜单也可以收回去了：

如果为了美观的话，还可以给.slideUpDown添加属性opacity: 0; 另，同学写的这个效果与源码的案例不一样，所以最开始无法准确判断最终效果，因此无法直接给出解决方案，要仔细询问才可以准确解答，不过也抱歉给同学带来了不好的学习体验，老师以后会注意。

祝学习愉快~

收起回答

提问者慕粉1905369247 2020-04-22 19:02:36

收起回答

好帮手慕码 2020-04-22 19:01:01

同学你好，解答如下：

（1）相对定位和绝对定位通常是结合着使用的，一般是“父相子绝”，即父级相对定位、子级绝对定位，如果同学对于此概念还是不太明白的话，建议同学复习一下：

https://class.imooc.com/course/757

（2）没有下拉的动画可能是没有设置过渡的属性，可以通过transition属性，例如transition: height 0.5s;去实现。

另，老师不理解你要实现什么效果，且老师这边没有同学使用的图片，无法调试效果。请同学详细描述一下练习的哪一个课程的案例效果，以便老师为你解答。

祝学习愉快~

收起回答

提问者慕粉1905369247 #1

不需要图片也可以，就是下拉，鼠标滑过咸宁那个下拉

2020-04-22 19:02:23
提问者慕粉1905369247 #2

就是页面里一个有下拉动画，一个没有，然后js的动画没问题，css3的动画有问题

2020-04-22 19:03:40
提问者慕粉1905369247 #3

css3的动画是可以下拉出来，但是收不回去

2020-04-22 19:05:19