老师有个问题

老师有个问题

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<link rel="stylesheet" href="css/base.css">

<link rel="stylesheet" href="css/common.css">

<link rel="stylesheet" href="css/index.css">

</head>

<body>

<div class="nav-site">

<div class="container">

<ui class="fl">

<li class="fl"><a href="javascript:;" class="nav-site-login">亲，请登录</a></li>

<li class="fl"><a href="javascript:;" class="nav-site-signup link">免费注册</a></li>

<li class="fl"><a href="javascript:;" class="nav-site-mobile link">手机逛慕淘</a></li>

</ui>

<ui class="fr">

<li class="menu dropdown fl" data-active="menu">

<a href="javascript:;" class="dropdown-toggle link transition">我的慕淘<i class="dropdown-arrow icon transition">&#xe609;</i></a>

<ul class="dropdown-layer dropdown-left">

<li><a href="javascript:;" class="menu-item">已买到的宝贝</a></li>

<li><a href="javascript:;" class="menu-item">我的足迹</a></li>

</ul>

</li>

<li class="menu dropdown fl" data-active="menu">

<a href="javascript:;" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow icon transition">&#xe609;</i></a>

<ul class="dropdown-layer dropdown-left">

<li><a href="javascript:;" class="menu-item">收藏的宝贝</a></li>

<li><a href="javascript:;" class="menu-item">收藏的店铺</a></li>

</ul>

</li>

<li class="fl">

<a href="javascript:;" class="nav-site-category link">商品分类</a>

</li>

<li class="menu dropdown fl" data-active="menu" data-load="js/dropdown-seller.json">

<a href="javascript:;" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow icon transition">&#xe609;</i></a>

<ul class="dropdown-layer dropdown-left">

<li class="dropdown-loading"></li>

<!-- <li><a href="javascript:;" class="menu-item">免费开店</a></li>

<li><a href="javascript:;" class="menu-item">已卖出的宝贝</a></li>

<li><a href="javascript:;" class="menu-item">出售中的宝贝</a></li>

<li><a href="javascript:;" class="menu-item">卖家服务市场</a></li>

<li><a href="javascript:;" class="menu-item">卖家培训中心</a></li>

<li><a href="javascript:;" class="menu-item">体验中心</a></li> -->

     </ul>

  </li>

<li class="nav-site-service menu dropdown fl" data-active="menu">

<a href="javascript:;" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow icon transition">&#xe609;</i></a>

<ul class="dropdown-layer dropdown-right">

<li><a href="javascript:;" class="menu-item">消费者客服</a></li>

<li><a href="javascript:;" class="menu-item">卖家客服</a></li>

</ul>

  </li>

</ui>

</div>

</div>


<!-- 站点导航结束 -->



    <!-- <script src="js/jquery.js"></script> 引用本地jquery.js -->

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> cdn引用方法-->

<script>

    //两种判断是否有jquery库的写法：

// window.jQuery || document.write('<script src="js/jquery.js"><' + '/script>')

window.jQuery || document.write('<script src="js/jquery.js"><\/script>');

</script>

<script src="js/transition.js"></script>

<script src="js/showHide.js"></script>

<script src="js/dropdown.js"></script>

<script src="js/index.js"></script>

</body>

</html>


--common.css--

/* 公共样式 */

.container{

width: 1200px;

margin: 0 auto;

}

.link{

color: #4d555d;

}

.link:hover{

color: #f01414;

}

.transition{

-o-transition: all .5s;

-ms-transition: all .5s;

-moz-transition: all .5s;

-webkit-transition: all .5s;

transition: all .5s;

}


/* icon */

@font-face {

font-family: "iconfont";

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

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

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

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

url('../test/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;

}

/* showHide */

.fadeOut{

opacity: 0;

visibility: hidden;

}

.slideUpDownCollapse{

height: 0 !important;

padding-top: 0 !important;

padding-bottom: 0 !important;

}

.slideLeftRightCollapse{

width: 0 !important;

padding-left: 0 !important;

padding-right: 0 !important;

}


/* dropdown */

.dropdown{

position: relative;

}

.dropdown-toggle{

position: relative;

z-index: 3;

}

.dropdown-arrow{

display: inline-block;

line-height: 1;

vertical-align: middle;  /* 垂直居中 */

}

.dropdown-layer{

display: none;

position: absolute;

z-index: 2;

}

.dropdown-left{

left: 0;

right: auto;

}

.dropdown-right{

left: auto;

right: 0;

}

[class*="-active"] .dropdown-arrow{

-o-transform: rotate(180deg);

-ms-transform: rotate(180deg);

-moz-transform: rotate(180deg);

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

.dropdown-loading{

        width:32px;

        height: 32px;

        background: url(../img/loading.gif) no-repeat;

        margin: 20px;

    }


/* menu dropdown */

.menu .dropdown-toggle{

display: block;

height: 100%;

padding: 0 13px 0 12px;

border-left: 1px solid #f3f5f7;

border-right: 1px solid #f3f5f7;

}

.menu .dropdown-arrow{

margin-left: 5px;

}

.menu .dropdown-layer{

top: 43px;

background: #fff;

border: 1px solid #cdd0d4;

}

.menu-item{

display: block;

height: 30px;

line-height: 30px;

color: #4d555d;

padding: 0 12px;

white-space: nowrap;   /* 禁止换行 */

}

.menu-item:hover{

background: #f3f5f7;

}


.menu-active .dropdown-toggle{

background: #fff;

border-color: #cdd0d4;

}

--index.css--

/* nav-site */

.nav-site{

width: 100%;

background: #f3f5f7;

}

.nav-site .container{

height: 44px;

line-height: 44px;

border-bottom: 1px solid #cdd0d4;

}

.nav-site-login{

color: #f01414;

margin-left: 15px;

}

.nav-site-signup,

.nav-site-mobile{

margin-left: 10px;

}

.nav-site-category{

margin: 0 10px;

}

.nav-site-service{

margin-right: 15px;

}

--showHide.js--

(function($){

'use strict';

var transition = window.mt.transition; // transition兼容解决，transition.js


// 提取init公共部分

function init($elem,hiddenCallback){

if($elem.is(":hidden")){//hidden

$elem.data("status","hidden");

if(typeof hiddenCallback === "function") hiddenCallback();

}else{//shown

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

}

}

// 提取show公共部分

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 silent = {

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());

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());

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());

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(){

$elem.data("status","shown").trigger("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(){

$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._customShow($elem);

},

hide:function($elem){

js._customHide($elem,{

'width': 0,

'padding-left': 0,

'padding-right': 0

});

}

},

fadeSlideUpDown:{

init:function($elem){

js._customInit($elem,{

'opactiy':0,

'height':0,

'padding-top':0,

'padding-bottom':0

})

},

show:function($elem){

js._customShow($elem);

},

hide:function($elem){

js._customHide($elem,{

'opactiy': 0,

'height': 0,

'padding-top': 0,

'padding-bottom': 0

});

}

},

fadeSlideLeftRight:{

init:function($elem){

js._customInit($elem,{

'opactiy':0,

'width':0,

'padding-left':0,

'padding-right':0

})

},

show:function($elem){

js._customShow($elem);

},

hide:function($elem){

js._customHide($elem,{

'opactiy':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(var p in options){

styles[p] = $elem.css(p)

}

$elem.data("styles",styles);

js._init($elem,function(){

$elem.css(options);

})

}

js._show = function($elem,mode){

show($elem,function(){

$elem.stop()[mode](function(){

$elem.data("status","shown").trigger("shown");

});

})

}

js._customShow = 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");

});

})

}


var defaults = {

css:false,

js:false,

animation:"fade"

};

function showHide($elem,options){

var mode = null;

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

mode = css3[options.animation] || css3[defaults.animation];

}else if(options.js){ //js.animation

mode = js[options.animation] || js[defaults.animation];

}else{ //no animation

mode = silent;

}

mode.init($elem);

return {

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

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

}

}


$.fn.extend({

showHide:function(option){

return this.each(function(){

var $this = $(this),

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

mode = $this.data("showHide");

if(!mode){

$this.data("showHide",mode = showHide($this,options));

};

if(typeof mode[option] === "function"){

mode[option]();

}

})

}

});


/*window.mt = window.mt || {};

window.mt.showHide = showHide;*/

})(jQuery);


--transition.js--

(function(){

var transitionEndEventName = {

transition:"transitionend",

MozTransiton:"transitionend",

WebkitTransiton:"webkitTransitionEnd",

OTransiton:"oTransitionEnd otransitionend",

};


var transitionend = "",

isSupport = false;


for(var name in transitionEndEventName){

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

transitionend = transitionEndEventName[name];

isSupport = true;

break;

}

}


window.mt = window.mt || {};

window.mt.transition = {

end:transitionend,

isSupport:isSupport

};

})();


--dropdown.js--

(function($){

'use strict';


function Dropdown($elem,options){

this.$elem = $elem;

this.options = options;

this.$layer = this.$elem.find(".dropdown-layer");

this.activeClass = options.active + "-active";

this._init();

};


Dropdown.DEFAULTS = {

event:"hover",

css:false,

js:false,

animation:"fade",

delay:0,

active:"dropdown"

};

Dropdown.prototype._init = function(){

var self = this;

this.$layer.showHide(this.options);

this.$layer.on("show shown hide hidden",function(e){

self.$elem.trigger("dropdown-" + e.type);

});

if(this.options.event === "click"){

this.$elem.on("click",function(e){

self.show();

e.stopPropagation();

});

$(document).on("click",$.proxy(this.hide,this));

}else{

this.$elem.hover($.proxy(this.show,this), $.proxy(this.hide,this));

}

}

Dropdown.prototype.show = function(){

var self = this;

if(this.options.delay){

this.timer = setTimeout(function(){

_show();

},this.options.delay)

}else{

_show();

}

function _show(){

self.$elem.addClass(self.activeClass);

self.$layer.showHide("show");

}

};

Dropdown.prototype.hide = function(){

if(this.options.delay){

clearTimeout(this.timer);

}

this.$elem.removeClass(this.activeClass);

this.$layer.showHide("hide");

};


$.fn.extend({

dropdown:function(option){

return this.each(function(){

var $this = $(this),

dropdown = $this.data("dropdown"),

options = $.extend({}, Dropdown.DEFAULTS, $this.data(), typeof option === "object" && option);

if(!dropdown){ //first time 单例

$this.data("dropdown", dropdown = new Dropdown($this,options));

}


if(typeof dropdown[option] === "function"){

dropdown[option]();

}

});

}

});


})(jQuery);


--index.js--

(function($){

'use strict';


$(".dropdown").on("dropdown-show", function(e){

var $this = $(this),

dataLoad = $this.data("load");


if(!dataLoad) return;


if(!$this.data("loaded")){

var $layer = $this.find(".dropdown-layer"),

    html = "";


$.getJSON(dataLoad,function(data){

setTimeout(function () {

            for (var i = 0; i < data.length; i++) {

                html += '<li><a href="' + data[i].url + '" target="_blank" class="menu-item">' + data[i].name + '</a></li>'

            }

            $layer.html(html);

            $this.data('loaded', true);

        }, 1000);

});

}

});


$(".dropdown").dropdown({

event:"clic",

css3:true,

js:false,

delay:0,

animation:"fadeSlideUpDown"

});

})(jQuery);

http://img1.sycdn.imooc.com//climg/5d8accfa09d4b19113340239.jpg

为什么下拉框是这样的啊，没有包裹着文字
1234567891234548 2019-09-25
源自：实战：下拉菜单组件化   3-6 改写站点导航中的下拉菜单
1
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

3回答
好帮手慕夭夭 2019-09-26 18:48:10

你好同学，老师第二次回复让同学把所有的代码都粘贴到问答区，同学说只改了一个文件。老师拿你改的，又多次测试确实是可以的。但是这次同学回复还改了js代码，同学上次就应该把代码粘贴过来哦。因为同学测试的代码与老师测试的代码不对称，来来回回几次问题总是解决不了哦。

所以呢，为了保障更准确的测试，不管你还有没有改过其他的，请同学将所有的代码粘贴到问答区。再次强调，是把所有的html，css，js再重新上传一遍，因为这个问题代码太多了。可能造成混乱，建议同学重新创建一个问题。

希望同学理解和支持，按照老师说的去做哦。祝学习愉快，望采纳。

0
收起回答
好帮手慕夭夭 2019-09-26 13:36:51

你好同学，老师用你给的代码又测试了一下，并且也让其他老师也进行了测试，多次测试都是没有问题的。请同学看一下浏览器控制台有没有报错信息，是不是你项目中还有其他代码，但是没有粘贴上来影响的。或者是在其他浏览器中再测试一下哦。

祝学习愉快，望采纳。

0
收起回答
  • 提问者 1234567891234548 #1
    --index.js-- $(".dropdown").dropdown({ css3:true, js:false, delay:0, animation:"slideUpDown" }); 这里我改了之后就不行了，我把animation:"fadeSlideUpDown"改成animation:"slideUpDown"之后就不行了
    2019-09-26 14:55:18
好帮手慕夭夭 2019-09-25 11:53:10

你好同学，原因如下：

当鼠标还没有移入下拉菜单的时候，下拉菜单里面只有一个li 。它的实际占用高度为72px(元素在网页中实际占用高度包含margin 。移入菜单的时候，给下拉菜单重新设置了高度 ，此时因为新数据还没有加载过来，所以获取到的高度就是72px。然后数据加载过来之后，内容太小，就溢出了哦。

http://img1.sycdn.imooc.com//climg/5d8ae39709a9715311970332.jpg

所以可以在css中，重新设置一下高度，把高度72px覆盖即可：

http://img1.sycdn.imooc.com//climg/5d8ae4a409b003c905440241.jpg

祝学习愉快，望采纳。

0
收起回答
  • 提问者 1234567891234548 #1
    但是我改了之后发现下拉框收不回去了，嗯其他的下拉框也收不回去了
    2019-09-25 12:01:26
  • 好帮手慕夭夭 回复 提问者 1234567891234548 #2
    老师这边移入移出都正常，同学清除缓存重新测试一下。如果还是不对，把修改之后的全部代码都粘贴到问答区，老师帮你测试哦
    2019-09-25 17:29:53
  • 提问者 1234567891234548 回复 好帮手慕夭夭 #3
    --common.css-- /* menu dropdown */ .menu .dropdown-toggle{ display: block; height: 100%; padding: 0 13px 0 12px; border-left: 1px solid #f3f5f7; border-right: 1px solid #f3f5f7; } .menu .dropdown-arrow{ margin-left: 5px; } .menu .dropdown-layer{ top: 43px; background: #fff; border: 1px solid #cdd0d4; height: auto !important; } .menu-item{ display: block; height: 30px; line-height: 30px; color: #4d555d; padding: 0 12px; white-space: nowrap; /* 禁止换行 */ } .menu-item:hover{ background: #f3f5f7; } .menu-active .dropdown-toggle{ background: #fff; border-color: #cdd0d4; } 就只是改了这个文件的这几行代码，其他的都没改
    2019-09-26 09:27:05
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

老师。有个问题
1 0 3
老师，跟着教程操作后，有几个问题。
13 0 3
老师 ，定时器问题
13 0 5
老师有个问题请教
17 1 3
我想咨询下，有没QQ群，有问题要提问
0 0 3

登录后可查看更多问答，登录/注册

2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师