体系课

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

3-5自由编程

来源：3-5 自由编程

10hours

2019-11-16 14:51:28

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

  1. 第一个问题是 购物车这个按钮怎么让他遮住下拉层的上边框(灰色的border)，设置top失效了...

  2. http://img.mukewang.com/climg/5dcf9a7209bb781b04480691.jpg

    第二个问题是下拉层的滚动条没法弄出来，因为我在JS上设置了一个函数自动传递高度，请老师解答

//index.html   
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/index.css"> 
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/iconfont.css">
</head>
<body>
<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl">
<a href="###" class="nav-site-login fl ">亲，请登录</a>
</li>
<li class="nav-site-signup fl link">免费注册</li>
    <li class="nav-site-mobile fl link">手机逛木桃</li>
</ul>
<ul class="fr">
<li class="menu dropdown fl" data-active='menu'>
<a href="#" target="_blank" class="dropdown-toggle link transition">我的木桃<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-left transition">
<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 transition">
<li><a href="#" target="_blank" class="menu-item">收藏的宝贝</a></li>
<li><a href="#" target="_blank" class="menu-item">收藏的店铺</a></li>
</ul>
</li>
<li class="fl">
<a href="#" target="_blank" class="nav-site-category link">商品分类</a>
</li>
<div class="menu dropdown fl" data-active='menu' data-load="../js/sell.json">
<a href="#" target="_blank" class="dropdown-toggle link ">卖家中心<i class="dropdown-arrow"></i></a>
<div class="dropdown-layer dropdown-left ">
<li class="dropdown-loading"></li> 

<!--  <ul>
<li><a href="#" target="_blank" class="menu-item">免费开店</a></li>
<li><a href="#" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="#" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="#" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="#" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="#" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="#" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="#" target="_blank" class="menu-item">已卖出的宝贝</a></li>
</ul> -->
</div>
</div>
<li class="menu dropdown fl nav-site-service" data-active='menu'>
<a href="#" target="_blank" class="dropdown-toggle link ">联系客服<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-right transition">
<li><a href="#" target="_blank" class="menu-item">消费者客服</a></li>
<li><a href="#" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="header">
<div class="container">
<h1 class="fl"><a href="index.html" class="header-logo text-hidden">mutao</a></h1>
<!-- h1标签的使用有助于seo优化，就是方便网络爬虫在我们网页上爬取到重要信息，h1标签权重高，会优先被爬虫爬取。所以logo、重要信息等优先用h、em等标签包裹，但是这些标签不能过多 -->
<div id='header-search' class="header-search fl">
<form action="https://s.taobao.com/search" target="_blank" class='search-form'>
<input type="text" name="q" class="search-inputbox fl" placeholder="mutaogouwu" autocomplete="off">
<input type="submit" value="搜索" class="search-btn fl">
</form>

<ul class="search-layer">

<!-- <li class="search-layer-item text-ellipsis">东西很长要省略就用text-overflow: ellipsis;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;</li>
<li class="search-layer-item">11</li>
<li class="search-layer-item">11</li> -->
</ul>
</div>
<div class="cart fr" id="cart" data-active='cart' data-load='../js/cart.json'>
<div class="cart-btn">
<i class="cart-logo iconfont icon-cart"></i>
<span class="cart-name">购物车</span>
<span class="cart-num">18</span>
<i class="cart-arrow iconfont icon-arrowdown"></i>
</div>

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

  <li class="dropdown-loading"></li> 
<!-- <li><a href="#" target="_blank" class="dropdown-layer-item">1111</a></li>
<li><a href="#" target="_blank" class="dropdown-layer-item">2222</a></li>  -->
<!-- <li class="dropdown-layer-title cart-layer-title">新加入的商品</li> -->
  <!--<li class="drodown-layer-item cart-layer-item">
<img src="../img/cart/1.png" alt="#" class="fl">
<div class="item-detail fl">
<span class="item-detail-up">adidas 阿迪达斯训练 男子</span><br/>
<span class="item-detail-down"><b>￥355X1</b></span>
</div>
<span class="item-close fr"><a href="#">×</a></span>
                   </li> -->
                   <!-- <li class="item-total">
                    <span class="total-price fl">共<b>0</b>件商品 共计<b>￥ 0.00</b></span>
                    <div class="GoCartBtn fr">去购物车</div>
                   </li> -->
</ul>
</div>

</div>
</div>
</div>
<div class="nav-main">
<div class="container">
<a href="#" class="link">团购</a
><a href="#" class="link">天黑黑</a
><a href="#" class="link">名品汇</a
><a href="#" class="link">发现</a
><a href="#" class="link">二手特价</a
><a href="#" class="link">数码城</a>
</div>
</div>
<div class="focus">
<div class="container">
<div class="category fl">
<a href="#" class="category-title"><i class="iconfont">&#xe631;</i>商品分类</a>
</div>
<div class="carousel fl"></div>
<div class="focus-right fr"></div>
</div>

</div>
<script src="../js/jquery.js"></script> 
<script >
window.jQuery || document.write('<script src="../js/jquery.js"><\/script>')
</script>
<!-- <script src="http://mat1.gtimg.com/libs/jquery/1.12.0/jquery.js"></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>
//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;
		color: #333;
	}

	/*重置默认样式*/
	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;
		margin: 0 auto;
	}

	.link{
		color: #4d555d;
	}
	.link:hover{
		color: #f01414;
	}
	.text-hidden{
	text-indent: -9999px;
	overflow: hidden;
}
	.text-ellipsis{
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}	
//iconfont.css
@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- */
}

.iconfont {
  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";
}

.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";
}
//index.css
/* nav-site */
	.nav-site{
		width: 100%;
		background: #f3f5f7;
	}
	.nav-site .container{
		border-bottom: 1px solid #cdd0d4;
		height: 44px;
		line-height: 44px;
	}
	.nav-site-login{
		color: #f01414;
		margin-left: 15px;
	}
	.nav-site-signup{
		margin-left: 10px;
	}
	.nav-site-mobile{
		margin-left: 10px;
	}
	.nav-site-service{
		margin-right: 15px;
	}
	.nav-site-category{
		margin: 0 10px;
	}
/* nav-main */
	.nav-main{
		width: 100%;
		background-color: #07111b;
		font-size: 13px;
		margin-top: 45px;
		height: 48px;
	}
	.nav-main a{
		padding: 0 25px;
		color: #e9e9ea;
		line-height: 48px;
	}
	.nav-main a:nth-child(1){
		margin-left: 208px;
	}
/* header */
	.header{
		height: 124px;
		width: 100%;
		background: #f3f5f7;
	}
	.header-logo{
		display: block;
		width: 136px;
		height: 48px;
		background: url(../img/header-logo.png) no-repeat;
		margin-left: 15px;
	}
/* header-search */
	.header-logo,.header-search,.cart{
		margin-top: 36px;
	}
	.header-search {
		position: relative;
		border: 1px solid #cfd2d5;
		margin-left: 144px;
	}
	.search-inputbox {
		width: 585px;
		height: 40px;
		border: 0;
		padding: 0 10px;
		border: none;
	}
	.search-btn {
		width: 73px;
		height: 40px;
		background: #07111b;
		font-size: 12px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		border: none;
		cursor: pointer;
	}
	.search-layer {
		position: absolute;
		top: 100%;
		width: 100%;
		left: -1px;
		background: #fff;
		border: 1px solid #cfd2d5;
	}
	.search-layer-item {
		padding: 0 10px;
		color: #333;
		height: 24px;
		line-height: 24px;
		cursor: pointer;
	}

	.search-layer-item:hover{
		background-color: #f3f5f7;
	}
/* cart */
    .cart-name:after,.cart-logo,.cart-name,.cart-num{
    	color: #ffffff;
    }
	.cart{
		margin-left: 49px;
		position: relative;
		color: #fff;
	}
	.cart-btn{
		height: 14px;
		width: 159px;
		background-color: #f01414;
		padding: 13px 0 15px 0;
		cursor: pointer;
		z-index: 2;
		position: relative;
	}
	.cart-name:after{
		content: '|'!important;
		margin: 0 10px;
		font-size: 13px;
	}
	.cart-logo{
		margin: 0 13px;
		font-size: 14px;
	}

    .icon-arrowdown:before {
    	font-size: 12px;	
    	margin-left: 5px;
    }
    .cart-layer{
    	background: #fff;
    	top: -10px;
    	right: 0;
    	position: absolute;
    	width: 320px; 
    	overflow-x: auto;
    	z-index: 10;
    }
    .cart-layer-item{
    	height:20px;
    	width: 80px;
    	background: #fff;	
    }
    
    .cart-btn:hover{
    	background:#fff;
    }
    .cart:hover .cart-btn{
    	background:#fff;
    }
    .cart-active .cart-logo,
    .cart-active .cart-name:after,
    .cart-active .cart-name,
    .cart-active .cart-num,
    .cart-active .cart-arrow{
    	color: #f01414
    }
    .cart-layer-title{
    	color: #07111b;
    	font-size: 12px;
    	height: 52px;
    	line-height: 52px;
    	padding-left: 24px;
    }
    .cart-layer-item,.cart .item-total{
    	height: 64px;
    	width: 280px;
    	margin: 0 12px;
    	border-top: 1px solid #d9dde1;
    }
    .cart-layer-item img{
    	margin-top: 12px;
    }
    .cart .item-detail{
    	margin-left: 13px;
    	padding-top: 16px;
    }
    .cart .item-detail span{
    	display: block;
    }
    .cart-layer-item .item-close{
    	font-size: 20px;
    }
    .cart .dropdown-loading{
    	margin:30px 50px 40px 140px;
    }
    .cart .item-total{
    	line-height: 64px;
   } 
   .cart .item-total .total-price{
   	   margin-left: 15px;
   }
   .cart .item-total .GoCartBtn{
   	   height: 35px;
   	   width: 80px;
   	   background-color: #f01414;
   	   line-height: 35px;
   	   color: #fff;
   	   text-align: center;
   	   cursor: pointer;
   	   margin-top: 15px;
   	   border-radius: 3px;
   }
/* dropdown */
	.dropdown{
		position: relative;
	}
	.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;
	}
	/* .dropdown-toggle:hover{
		background: #ffffff;
		border-color:  #cdd0d4;
	} */
	.dropdown-arrow{
		background: url(../img/dropdown-arrow.png) no-repeat left center;
		height: 6px;
		width: 8px;
		display: inline-block;
		margin-left: 8px;
		vertical-align: center;
	}
	.dropdown-left{
		left: 0;
		right: auto;
	}
	.dropdown-right{
		right: 0;
		left: auto;
	}
	.dropdown-layer{
		position: absolute;
		display: none;
		top: 43px;
		background: #ffffff;
		border:1px solid #cdd0d4;
		z-index: 1;
		overflow: hidden;
	}
	.menu-item{
		height: 30px;
		line-height: 30px;
		padding: 0 12px;
		white-space: nowrap;
		color: #8a8e93;
		display: block;
	}
	.menu-item:hover{
		background: #f3f5f7;
	}
	.menu-active .dropdown-toggle{
	background: #ffffff;
	border-color:  #cdd0d4;
	}
	.menu-active .dropdown-arrow{
		background: url(../img/dropdown-arrow-active.png) no-repeat;
	}
/*showHide*/
	.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;
	}
	.dropdown-loading{
		width: 32px;
		height: 32px;
		margin: 20px;
		background: url(../img/loading.gif) no-repeat;
	}
/* focus */
.focus{
	height: 504px;
	width: 100%;
	background-color: #eee;
	margin-top: 8px;
}
//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,function(){
				self.$layer.height('auto')
				.height(self.$layer.height());

			});
		
		})
		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 防止受外部影响 其实意义不大
//index.js
(function($){


	//menu
	$('.dropdown').on('dropdown-show',function(e){
				
				var $this = $(this),
				    Dataload=$this.data('load');

				    if(!Dataload) return ;


				/*$layer.html('<li class="dropdown-loading"></li>');//加载完成后被覆盖 */
				if(!$this.data('loaded')){
					var html = '',
				    $layer = $this.find('.dropdown-layer');
					console.log(Dataload)
					$.getJSON(Dataload,function(data){
					console.log(1)
					setTimeout(function(){
						for(var i=0;i<data.length;i++){
						html +='<li><img src="'+data[i].name+'"/><a href="'+data[i].url+'" target="_blank" class="menu-item">'+data[i].url+'</a></li>';
							}
						$layer.html(html);
					},1000);
					$.getJSON(Dataload,function(data){
						console.log(data)
					})

				/*$this.data('loaded',true);*/
				
				})
				}
				
			})
	$('.dropdown').dropdown({
				css3:true,
				js:false,
				delay:0,
				animation:'slideUpDown'
			});


	//head-search
    var $headerSearch =$('#header-search');
	var html='',
        maxNum=10;
	$headerSearch.on('search-getData',function(e,data,$layer){
		var $this =$(this)

		/*$layer.html(html);*/
		html= createHeaderSearchLayer(data,maxNum);
		
		$this.search('appendLayer',html)

		if(html){
			$this.search('showlayer')//if (typeof search[option] === 'function')
		}else {
			$this.search('hidelayer')
		}
	   	
	}).on('search-noData',function(e,$layer){
		var $this =$(this);
		$this.search('hidelayer');		
		$this.search('appendLayer','')
	}).on('click','.search-layer-item',function(){//事件代理 用layer代理 search-layer-item 避免每次点击都绑定一次click
	   	  $headerSearch.search('setVal',$(this).html());
	   	  $headerSearch.search('submit',$(this).html());

	   })
	$headerSearch.search({
		autocomplete:true,
		css3:false,
		js:false,
		animation : 'slideUpDown',
		getDataInterval:200
	})
	function createHeaderSearchLayer(data,maxNum){
		var html='',
		    dataNum=data['result'].length,
		    maxNum=10;

		if(dataNum === 0){
			return ''
		}

		for(var i=0;i<dataNum;i++){
	   				if(i>=maxNum) break;
	   				html+='<li class="search-layer-item">'+data['result'][i][0]+'</li>';

	   			}
	    return html;
	    }  
	//cart  购物车
    $('.cart').dropdown({
			css3:true,
			js:false,
			delay:0,
			animation:'slideUpDown',
			active:'cart'
		});
    $('.cart').on('dropdown-show',function(e,updataLayer){
    	var html='',
    	$this=$(this),
    	$layer=$this.find('.dropdown-layer'),
    	Dataload=$this.data('load'),
    	maxNum =5;
    	console.log(Dataload)


    	if(!Dataload) return;
    	$.getJSON(Dataload,function(data){
	    	if(!$this.data('loaded')){    
		    	setTimeout(function(){	    		
		    		createCartLayer(data);
		    		//调用
		    		updataLayer();
		    	},1000)
		    	    $this.data('loaded',true)
		    	}else{
		    		createCartLayer(data);
		    	}

	    	function createCartLayer (data){
	    		var layer =[];
	    		for(var i=0;i<maxNum;i++){
					html+= 
					'<li class="drodown-layer-item cart-layer-item">'+
						'<img src="'+data[i].url+'" alt="#" class="fl">'+
						'<div class="item-detail fl">'+
							'<span class="item-detail-up">'+data[i].name+'</span><br/>'+
							'<span class="item-detail-down"><b>'+data[i].price+'</b></span>'+
						'</div>'+
						'<span class="fr"><a class="item-close" href="#">×</a></span>'+
				    '</li>'
	    	}
	    	    $layer.html('<li class="dropdown-layer-title cart-layer-title">新加入的商品</li>'+html+
	    	    	'<li class="item-total">'+
                   	'<span class="total-price fl">共<b>0</b>件商品 共计<b>￥ 0.00</b></span>'+
                   	'<div class="GoCartBtn fr">去购物车</div>'+
                    '</li>');
	    	}
    		    })
    	
    	


    })

	    
})(jQuery);
//cart.json
[
	{
	"name":"adidas 阿迪达斯训练 男子",
	"url":"../img/cart/1.png",
	"price":"￥355X1"
    },
    {
	"name":"玉兰油多效修护三部曲套装",
	"url":"../img/cart/2.png",
	"price":"￥199X1"
    },
    {
	"name":"Apple iPhone 7(A1666)",
	"url":"../img/cart/3.png",
	"price":"￥6188X1"
    },
    {
	"name":"飞利浦面条机 HR2356/31",
	"url":"../img/cart/4.png",
	"price":"￥659X4"
    },
    {
	"name":"罗技G29",
	"url":"../img/cart/5.png",
	"price":"￥2999X1"
    }
]


写回答

2回答

好帮手慕码

2019-11-16

已采纳

同学很棒哦，可以自己解决问题！继续加油！

0

好帮手慕码

2019-11-16

同学你好，使用同学的代码测试如下结果：

  1. 可以给cart-btn设置一些外边距，让cart-btn覆盖下拉框一部分即可：

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

  2. 下拉框的滚动条，可以设置overflow-scroll:

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

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

0
h0hours
h 我知道怎么弄了 谢谢老师！
h019-11-16
共2条回复

0 学习 · 14456 问题

查看课程

相似问题

3-5自由编程

回答 1

3-5自由编程的疑问

回答 1

3-5自由编程两个问题

回答 1

老师，我的问题是本节的3-5自由编程。

回答 1

回答 2

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