体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

老师有个问题

来源：3-6 改写站点导航中的下拉菜单

1234567891234548

2019-09-27 11:53:36

<!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>


<div class="header">

<div class="container">

<h1 class="fl">

<a href="./index.html" class="header-logo text-hidden">自定义</a>

</h1>

<div id="header-search" class="search fl">

<form action="https://s.taobao.com/search" target="_blank" class="search-form">

<input type="text" name="q" placeholder="灵魂没事一元抢" autocomplete="off" class="search-inputbox fl">

<input type="submit" value="搜索" class="search-btn fl">

</form>

<ul class="search-layer">

<!-- <li class="search-layer-item text-ellipsis">11111</li>

<li class="search-layer-item text-ellipsis">11111</li>

<li class="search-layer-item text-ellipsis">11111</li> -->

</ul>

</div>

<div class="cart fr"></div>

</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/search.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;

}

.text-hidden{

text-indent: -9999px;

overflow: hidden;

}

.text-ellipsis{

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}


/* 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;

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;

}


/* search */

.search{

position: relative;

border: 1px solid #cfd2d5;

}

.search-inputbox{

width: 585px;

height: 40px;

line-height: 40px;

background: #fff;

padding: 0 10px;

border: none;

}

.search-btn{

width: 73px;

height: 40px;

line-height: 40px;

font-size: 14px;

background: #07111b;

border: none;

text-align: center;

color: #fff;

cursor: pointer;

}

.search-layer{

display: none;

position: absolute;

top: 100%;

left: -1px;

width: 100%;

background: #fff;

border: 1px solid #cfd2d5;

}

.search-layer-item{

height: 24px;

line-height: 24px;

padding: 0 10px;

cursor: pointer;

}

.search-layer-item:hover{

background: #f3f5f7;

}


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

}


/* header */

.header{

width: 100%;

height: 124px;

background: #f3f5f7;

}

.header-logo,

.header .search,

.cart{

margin-top: 36px;

}

.header-logo{

display: block;

width: 136px;

height: 48px;

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

margin-left: 15px;

}

.header .search{

margin-left: 145px;

}


--dropdown.js--

(function($){

'use strict';


function Dropdown($elem,options){

this.$elem = $elem;

this.options = options;

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

/*this.activeClass = this.$elem.data("active") + "-active";*/

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

css3:true,

js:false,

delay:0,

animation:"slideUpDown"

});


})(jQuery);


--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

};

})();

http://img.mukewang.com/climg/5d8d866c09a5b39905290230.jpg

下拉菜单只能显示不能隐藏，这是怎么回事呢

写回答

2回答

好帮手慕慕子

2019-09-27

已采纳

同学你好， 因为按需加载是用户的行为，所以我们可以提供一个方法，它的作用是更新当前下拉层的高度，当用户按需加载完成内容后，手动调用这个方法更新下拉层的高度，示例：

  1. 在dropdown.js中init方法中添加一个函数用来更新下拉层的高， 第一遍将下拉层高度设置为auto， 让其由填充的内容撑开，然后在获取到填充内容后的高度， 赋值给下拉层，让其在页面中显示正常。

    http://img.mukewang.com/climg/5d8de4050953eb7110170513.jpg

  2. 调用这个函数， 在请求到json数据后，将拼接的html结构添加到页面后调用这个函数更新下拉层的高。

    http://img.mukewang.com/climg/5d8de4540960966710630652.jpg

  3. 测试结果， 可以正常显示的

    http://img.mukewang.com/climg/5d8de49309335f6b02210245.jpg

同学可以自己下去测试一下哦

如果帮助到了你， 欢迎采纳！

祝学习愉快~~~~

0

好帮手慕慕子

2019-09-27

同学你好， 代码中存在的问题如下所示

  1. dropdown-layer这个类不需要设置高度属性

    http://img.mukewang.com/climg/5d8dcdeb09dbf1fb04750191.jpg

  2. slideUpDown是通过添加删除slideUpDownCollapse这个类名，控制下拉菜单的显示和隐藏的，所以需要在CSS中设置对应的样式哦

    http://img.mukewang.com/climg/5d8dce1f097406ca05170180.jpg

如果帮助到了你， 欢迎采纳！

祝学习愉快~~~~

0
h234567891234548
h 但是不加的下拉框话就不会把文字包裹到，下拉框的高度就只有72px
h019-09-27
共1条回复

0 学习 · 14456 问题

查看课程

相似问题

老师。有个问题

回答 1

老师有个问题

回答 3

老师为什么会出现这个问题啊

回答 2

老师有个问题

回答 1

老师有几个问题

回答 1

打开慕课网App查看更多内容