体系课

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

有几点存在的问题请老师看一下

来源：3-5 自由编程

慕函数4234673

2020-03-11 16:57:43

index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="header">
<div class="containt">
<div class="header_cart" data-active="cart">
     <p><i class="arrow">&#xe641;</i>购物车 <span>|</span>18 <i class="icon">&#xe629;</i></p>
     <ul class="cart-layer">
               <li></li>
     </ul>
</div>
</div>
</div> 
 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/showhide.js"></script>
<script type="text/javascript" src="js/cart.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
index.css
li{
	list-style: none;
}
.header{
	width:100%;
}
.containt{
	width: 1200px;
	margin: 0 auto;
}
.header_cart{
		width: 155px;
		height: 40px;
		float:right;
		position: relative;
		z-index:2;
		
}
	p{
		display: inline-block;
		width: 100%;
		height: 100%;
		line-height: 40px;
		background: red;
		color:#fff;
		border:1px solid gray;
		border-bottom: none;
	}
	@font-face {font-family: "iconfont";
  src: url('font/iconfont.eot?t=1583893958788'); /* IE9 */
  src: url('font/iconfont.eot?t=1583893958788#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMQAAsAAAAABswAAALDAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBUIFBATYCJAMICwYABCAFhG0HOBvvBciuMG7hCYhqIy2ZjTAJvV0c4jh8fRFB/Npv9u59RzypRrp4Eg2RRKQUkkmIlEQjdIjiJdyfc+8bksbcZstqVzVAKry0KaWXZnR+08RCf2UGQm3C4dTcJp7MEStJLCWOJBrar24Z90bDW96RNQEbcMyxxwEPZKfHF24iAwLM/zHTJdBA8gPNMbNob4Dj1oFFB9kdyKHfMHbBC9xNoK6fomxldHoZaiX2oEAcs8CB2oJRkpinKpQbZiZxrko1O81egbPo9+OfFRSZUs6O2T4a8aH/K+P45KDYdgBBWk4ONo8cs0Ai9hudmyoEQ1WoOysNg2NFBl8UD8TiqALB/nV2eBPohcRnInnkR03JQPLszQvAxqTXUYpaNE8W6nuP7sHeO9t8HTys3M3A7q+dZbd8yzQfPp5j9bXtwS7a0LqRdh5O0aZNv22Yxttbuce72yhbT8c2bJN/02lHVbvlV1Ly/F5w1s8ClaC2utKeX/K0l7bG5081q/bNnT+g/F1tL81XpfKhTs3xM98DC/0Ahfwln/+df+PN/2uNv2obEngte470hWSYGlRPqgp+HmlgUTIotihLGqnRm1lQdVMZdXUUYW2Hr6nc7jv1hqru+1VX9GUgVzUKTchZUNIwZyqrulY4dTPG4PyGTkKFSDVMOwUgtCmBTIsnkGvzBk3IT1DS4xuUtQUK6g5DWLFhPIr1OYGORJ+4J4R5PKOuRNbHkYsYHCSOyFMi9CqKglmIqRllzxhmKJYYUxwGlpSUUMFTMgr2wyThJBc8Qk9qoZS5reu06Uuax1Oot0xADgn5CNcJgvFwGRqUl+orP78IBQ4kHKKjoE64CgkF1jph0hgDoGPMbFDBo9xTOBSwSBJFUAKXIkZBN5RIcETe3C2CPJImnGDP2XSnFB3K1LZnp3+3AupsXhbOiFzLCXMyL+RZcMw8hQoAAA==') format('woff2'),
  url('font/iconfont.woff?t=1583893958788') format('woff'),
  url('font/iconfont.ttf?t=1583893958788') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('font/iconfont.svg?t=1583893958788#iconfont') format('svg'); /* iOS 4.1- */
}

.arrow {
  font-family: "iconfont" !important;
  font-size: 14px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
   padding:0 8px;
}

@font-face {font-family: "icon";
  src: url('font/iconfont.eot?t=1583394931879'); /* IE9 */
  src: url('font/iconfont.eot?t=1583394931879#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANkAAsAAAAAB2QAAAMWAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCQIIbATYCJAMMCwgABCAFhG0HQRtsBsiusHENpCFMqAQJxJprPwA8C/FA7fe/s3f33W9mJNNmbk08aihMh0rIEJnuJbzJNc2ASrhxOodA329S4Hx+4IgsEKk5PI/CkN9NLgFkSDMDIzpTgAwzJMX8j3unfyU+n2U5rr3OP3UBxgEFNNamMcUKJCBvGLuJ4AEuJ6Bct1gea9fXtgJ/CWgXEM6fMTLAv6CROvKDUkHeMDQJbxWUZs+yF7zh3w//FUrJFCLQdfPJMgMo/NWvwvi4+Nh+iuAuZ4IziohJQCIcbLTs5iUjk7yURxLv7vRcEmRL+YtFOCeW5Qf942WEHMitBKN6NOMXzCLwqxEyEEGuxY4CbuiUxrsEhfqAsu6IcO+xqnVpQdO+Mn65qG7rWL0LYo/uxx4Wn8YfRbUCydcf4XvbVy4EAmP68Uuh8Mv3sB1dy+dC6YvPY2eO5xcbl1p2Ucvo2dSsCCTt00lfjK1vB3ZufaQeTtz/E9/+9axZssAcXeu79/eP99+4zI7J57bFUP8I5Hv0UY2DZVnL8EEEhZMfkV391ZONg23wPnM1RFYxJhkI6694Uq0Lafj+qquqDV40X/8Jl28YMnTD6MPPfWnzawYbXxgEmsWKrIbi8Sf+RFGwf7F3teaQdOm/f0UCP5/jruIJDLMBpTdpDfx07sCCFPOBNqaQgzlpPNrM55XUymO7IuCo9zVd1jQ4l6BUUwaZEl0QlRpEE2USCiosglypFVBuQsXoCg0ILyGVYdy0BkGtW8hU+wZRrVc0UT6hoNkf5GpDhHI7Q8OUFYbDmfI1VxFDkQHqR6GZdTow0lOByG9GRt7GkDyfU9sR4cx+mDQ9W45XIAciS/TghozJlGKIidMOy7XVkM3mhC7itCCWxpsodWUnzJxsOlM867QDgTUIhEEhBpDeKMiM5eSAaWlKUPl8M8SIZ8MgHaQRezuE4Jgrh5LESxyAVkgcg0iPcgpniFEyisIgjHCyg8o1E2KDESfI1dzIAmFR8UwTQi7ZEoxieKgkfnuZ/f+WQTmwdwxZiCHJb59hbEyc5NQlfphnTSgO83rkAAAAAA==') format('woff2'),
  url('font/iconfont.woff?t=1583394931879') format('woff'),
  url('font/iconfont.ttf?t=1583394931879') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('font/iconfont.svg?t=1583394931879#iconfont') format('svg'); /* iOS 4.1- */
}

.icon {
  font-family: "icon" !important;
  font-size: 14px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding:0 4px;

}
span{
	padding: 0 9px;
}
.cart_layer{
	display: none;
	width:330px;
	position: absolute;
	top:38px;
	right: 0px;
	height: 200px;
   border:1px solid gray;
   background: #fff;
   z-index: 1;

}

[class*="-active"] p{
	background: #fff;
	color:red;
}
[class*="-active"] .icon{
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .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 {
        visibility: hidden !important;
        opacity: 0 !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;
        background: url(../img/loading.gif) no-repeat;
        margin: 20px;
    }*/
js
transition.js
(function () {
	var transitionEndEventName = {
		transition: 'transitionend',
		MozTransition: 'transitionend',
		WebkitTransition: 'webkitTransitionEnd',
		OTransition: '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
	};
})();

cart.js
(function($){
//利用的构造函数封装下拉列表
function Cart($elem,options){
	 this.$elem=$elem
	 this.options=options
	 this.$layer=this.$elem.find(".cart-layer")
	 this.activeClass=options.active+"-active"
      this._init()
}   
//在构造函数的原型上添加方法
Cart.DEFAULTS= {
	     event:'hover',
        css3:false,
        js: false,
        animation: 'fade',
        active:'dropdown',
        delay:200
    }

 Cart.prototype._init=function(){ 
  	  //showHide的初始化
	  this.$layer.showHide(this.options)
	  var self=this
	  // this.$elem.hover(function(){
	  // 	self.show()
	  // },function(){
	  // 	self.hide()
	  // })
	  //发送消息
	  this.$layer.on("show shown hide hidden",function(e){
	  	 self.$elem.trigger('cart'+e.type,function(){
	  	 	self.$layer.height('auto').height(self.$layer.height())
	  	 })
	  })
	  //事件的初始化
	  if(this.options.event==="click" ){
            this.$elem.on("click",function(e){
            	self.show()
            	// return false
            	e.stopPropagation()
            })//当下拉层点击时显示下拉列表
            $(document).on("click",$.proxy(this.hide,this)) //当点击空白隐藏下拉列表
	  }else{
           this.$elem.hover($.proxy(this.show,this),$.proxy(this.hide,this))
	  }
	  // this.$elem.hover($.proxy(this.show,this),$.proxy(this.hide,this))
	  //$proxy改变this.show和this.hide的指向
   }
 Cart.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")
    } 
 }

Cart.prototype.hide=function(){
 	//如果开了定时器则清楚
 	if(this.options.delay){
 		clearTimeout(this.timer)
 	}
 	   this.$elem.removeClass(this.activeClass)
		this.$layer.showHide("hide")

 }

//添加的插件
$.fn.extend({
	cart:function(option){
		return this.each(function(){
			$this=$(this)

			var cart=$this.data("cart")

			var options=$.extend({},Cart.DEFAULTS,$this.data(),typeof option==="object"&& option)
			if(!cart){
			$this.data("cart",cart=new Cart($this,options))
			  
		      }
		 
		   if(typeof cart[option]==="function"){
		   	cart[option]()
		   }
		})
	}
 })




})(jQuery)
index.js
$(".header_cart").cart({
	event:'hover',
	css3:true,
	js:true,
	animation:'fade',
	delay:0,
	active:'cart'
	
})
由于上传的内容有限showhide.js 就没有上传

1.下拉层和上面框的底层重合的部分是不显示的，我的思路是让上面的部分覆盖下拉层，设置下拉层定位的top的值，然后设置z-index的值，应该是可以的啊，为啥没达到效果呢？

2.调用完showHide（"show"）he showHide("hide"),下拉层并没有显示
针对以上的问题应如何解决，还有鼠标经过的状态，我应如何判断他是有商品，还是没有商品呢？请老师给个思路


写回答

2回答

好帮手慕慕子

2020-03-11

同学你好， 对于你的问题解答如下：

  1. 通过检查元素可知，如下所示，p标签设置设购物车的样式，应该给该元素设置z-index值，提升显示层级，覆盖下拉层的上边框实现效果。

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

    示例：给p添加相对定位属性，然后设置z-index属性值。

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

    给下拉层设置样式测试下效果，（老师这里主要是为方便同学看到效果，具体的值需要同学自己下去调整）

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

    测试结果如下：

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

  2. 鼠标移入下拉层内容没有显示，是因为同学的下拉层中没有内容，所以视觉上是没有显示的，同学可以添加上内容即可。如上，第一条截图中，老师测试是可以显示下拉层的。

  3. 一般商品的数据都是从后台获取的，所以在我们获取数据时，可以进行判断，如果获取到了数据，那么就将其渲染到页面上显示，如果没有获取到数据，那么就可以显示一个提示信息“购物车为空”，这个思路老师前面的课程中老师有详细的讲解，建议：同学可以回顾下课程，加深理解。

  4. 因为transform属性行内元素无效，所以下拉箭头没有旋转，建议：调整箭头为行内块元素即可。示例：

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

    测试效果如下：

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

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

0

慕函数4234673

提问者

2020-03-11

老师还有一个问题，鼠标经过下拉箭头并没有旋转

0

0 学习 · 14456 问题

查看课程

相似问题

老师帮忙看一下为啥我请求json文件时会报这个错

回答 1

老师问2个问题

回答 9

点击下拉层选中内容并提交在search.js中实现，可能思路更简单

回答 1

l老师看看

回答 7

老师省略了哪些代码没有写，如：实例化函数function Storage

回答 4

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