3-5自由编程
来源：3-5 自由编程
10hours
2019-11-14 16:33:35
我发现这样写 cart-layer-item里面的内容无法撑开layer 很奇怪，我可以直接给cart-layer设置一个Height但是这样就写死了，我想的是加载图片一个高度，然后加载完内容出来又一个高度，但是现在不设置cart-layer的Height 里面的cart-layer-item 根本无法撑开layer 请老师解答
<!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" data-active='cart'>
<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>
<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>
</ul>
</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>//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;
}
/* 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{
height: 14px;
width: 159px;
background-color: #f01414;
margin-left: 49px;
padding: 13px 0 15px 0;
cursor: pointer;
position: relative;
color: #fff;
}
.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: 45px;
right: 0;
position: absolute;
width: 320px;
overflow: auto;
}
.cart-layer-item{
height:20px;
width: 80px;
background: #fff;
}
/* .cart:hover .cart-logo,
.cart:hover .cart-name:after,
.cart:hover .cart-name,
.cart:hover .cart-num,
.cart:hover .cart-arrow{
color: #f01414
} */
.cart:hover{
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
}
/* 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;
}//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);
console.log(e.type);
})
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)//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 : 'fade',
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(){
var html='',
$this=$(this),
$layer=$this.find('.dropdown-layer'),
maxNum =10;
if(!$this.data('loaded')){
$layer.html('<li class="dropdown-loading"></li>')
setTimeout(function(){
createCartLayer();
},1000)
$this.data('loaded',true)
}else{
createCartLayer();
}
function createCartLayer (){
for(var i=0;i<maxNum;i++){
html+='<li class="dropdown-layer-item cart-layer-item"><a href="#" target="_blank" >1111111</a></li>';
}
$layer.html(html);
}
})
})(jQuery);写回答
1回答
-
同学你好，因为高度设置时数据还没有完全加载进来，当数据完全加载过来，高度不会更新了，所以出现问题了。参考如下调整：
首先同学的代码测试是有报错的，参考如下修改
针对购物车下拉菜单，传一个函数去更新高度：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题