老师您看下
来源：2-1 项目准备及编写HTML基本结构
菜鸟00001
2019-05-10 10:59:28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!--站点导航开始-->
<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl"><a href="###" target="_blank" class="nav-site-login ">亲，请登录</a></li>
<li class="fl"><a href="###" target="_blank" class="nav-site-register link">免费注册</a></li>
<li class="fl"><a href="###" target="_blank" class="nav-site-Stroll link">手机逛慕淘</a></li>
</ul>
<ul class="fr">
<li class=" dropdown fl">
<a href="" class="dropdown-toggle link">我的慕淘<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="####" target="_blank" class="dropdown-item">已买到的宝贝</a></li>
<li><a href="####" target="_blank" class="dropdown-item">我的足迹</a></li>
</ul>
</li>
<li class=" dropdown fl">
<a href="" class="dropdown-toggle link">收藏夹<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="####" target="_blank" class="dropdown-item">收藏的宝贝</a></li>
<li><a href="####" target="_blank" class="dropdown-item">收藏的店铺</a></li>
</ul>
</li>
<li class="fl">
<a href="" class="nav-site-category link">商品分类</a>
</li>
<li class=" dropdown fl">
<a href="" class="dropdown-toggle link">卖家中心<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="####" target="_blank" class="dropdown-item">免费开店</a></li>
<li><a href="####" target="_blank" class="dropdown-item">已卖出的宝贝</a></li>
<li><a href="####" target="_blank" class="dropdown-item">出售中的宝贝</a></li>
<li><a href="####" target="_blank" class="dropdown-item">卖家服务市场</a></li>
<li><a href="####" target="_blank" class="dropdown-item">卖家培训中心</a></li>
<li><a href="####" target="_blank" class="dropdown-item">体验中心</a></li>
</ul>
</li>
<li class="nav-site-service dropdown fl">
<a href="" class="dropdown-toggle link">联系客服<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-right">
<li><a href="####" target="_blank" class="dropdown-item">消费者客服</a></li>
<li><a href="####" target="_blank" class="dropdown-item">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!--站点导航结束-->
<!-- <script type="text/javascript" src="js/jquery.js"></script> 直接引用本地jquery库 -->
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 通过cnd引入jquery一般把项目发布网上才用-->
<script>
// window.jQuery||'<script src="js/jquery.js"><'+'/script>'
window.jquery||document.write('<script src="js/jquery.js"><\/script>');
</script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
<!--
站点：site
容器：container
注册：register
逛：Stroll
下拉：dropdown
切换：toggle
箭头：arrow
项目：item
类别：category
服务：service
-->
/*站点导航*/
.nav-site{
width:100%;
background-color:#f3f5f7;
}
/*站点导航左侧内容*/
.nav-site .container{/*站点导航整体内容块设置*/
height:44px;
line-height:44px;
border-bottom:1px solid #cdd0d4;
}
.nav-site-login{/*站点导航请登录设置*/
margin-left:15px;
color:#f01414;
}
.nav-site-register,
.nav-site-Stroll{/*站点导航注册和手机购买设置*/
margin-left:10px
}
/*站点导航右侧内容*/
.dropdown{
position:relative;
}
.dropdown-toggle{
position:relative;
z-index:2;
display:block;
height:100%;
padding:0 12px 0 17px;
border-left:1px solid #f3f5f7;
border-right:1px solid #f3f5f7;
}
.dropdown-arrow{
display:inline-block;
width:8px;
height:6px;
background:url(../img/dropdown-arrow.png) no-repeat;
margin-left:8px;
vertical-align:middle;
}
.dropdown-layer{
display:none;
z-index:1;
position:absolute;
top:43px;
background-color:#fff;
border:1px solid #cdd0d4;
}
.dropdown-item{
display:block;
height:30px;
line-height:30px;
padding:0 12px;
color:#4d555d;
white-space:nowrap;
}
.dropdown-item:hover{
background-color:#f3f5f7;
}
.nav-site-category{/*商品分类*/
margin:0 10px;
}
.nav-site-service{/*服务*/
margin-right:17px;
}
/*下拉层左右对齐*/
.dropdown-left{left:0;right:auto;}
.dropdown-right{right:0;left:auto;}
/*下拉层显示与隐藏*/
/*.dropdown:hover .dropdown-toggle{
background-color:#fff;
border-color: #cdd0d4;
}
.dropdown:hover .dropdown-arrow{
background:url(../img/dropdown-arrow-active.png) no-repeat;
}
.dropdown:hover .dropdown-layer{
display:block;
}*/
$('.dropdown').hover(function(){
var $dropdown=$(this);
$dropdown.find('.dropdown-toggle').css({
'background-color':'#fff',
'border-color':'#cdd0d4'
});
$dropdown.find('.dropdown-arrow').css({
'background-image':'url(img/dropdown-arrow-active.png)'
});
// $dropdown.find('.dropdown-layer').show()
$dropdown.find('.dropdown-layer').css({
'display':'block'
})
},function(){
var $dropdown=$(this);
$dropdown.find('.dropdown-toggle').css({
'background-color':'',
'border-color':'#f3f5f7'
});
$dropdown.find('.dropdown-arrow').css({
'background-image':'url(img/dropdown-arrow.png)'
});
// $dropdown.find('.dropdown-layer').hide();
$dropdown.find('.dropdown-layer').css({
'display':'none'
})
})
我的js这么写为什么不生效呢
1回答
-
好帮手慕星星
2019-05-10
你好，经测试代码实现效果没有问题：
自己可以重新再测试下哦，祝学习愉快！
0
相似问题