5-2作业 右边导航问题
来源：5-1 展望未来
二师兄e
2017-12-31 11:18:27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>xiaobiaoti</title>
<script type="text/javascript" src="jQuery/jquery/jquery-1.12.4.min.js"></script>
<style>
.top-nav{
float: right;
margin:0;
padding:0;
}
.top-nav ul{
list-style: none;
}
.top-nav ul li{
display: inline-block;
vertical-align:top;
background:#f3f5f7;
border: 1px solid transparent;
border-radius: 4px;
}
.top-nav-list{
height:25px;
width: 90px;
margin:2px 2px;
}
.top-nav-list img{
position: relative;
top: 3px;
}
.top-nav-hidden a,
.goods{
display: block;
height:25px;
width: 90px;
margin:2px 2px;
}
.top-nav a{
text-decoration: none;
color: gray;
}
.top-nav-hidden{
display: none;
}
.top-nav a:hover{
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div class="top-nav">
<ul>
<li id="top-nav-one">
<div class="top-nav-list">
<span><a href="#">我的慕淘</a></span>
<span><img src="素材/icon/21.png" alt=""></span>
</div>
<div class="top-nav-hidden" id="hidden">
<a href="#">已买到的宝贝</a>
<a href="#">我的足迹</a>
</div>
</li>
<li id="top-nav-two">
<div class="top-nav-list">
<span><a href="#">收藏夹</a></span>
<span><img src="素材/icon/21.png" alt=""></span>
</div>
<div class="top-nav-hidden">
<a href="#">收藏的宝贝</a>
<a href="#">收藏的店铺</a>
</div>
</li>
<li><a href="#" class="goods">商品分类</a></li>
<li id="top-nav-four">
<div class="top-nav-list">
<span><a href="#">卖家中心</a></span>
<span><img src="素材/icon/21.png" alt=""></span>
</div>
<div class="top-nav-hidden">
<a href="#">免费开店</a>
<a href="#">已卖出的宝贝</a>
<a href="#">出售中的宝贝</a>
<a href="#">已卖出的宝贝</a>
<a href="#">卖家服务中心</a>
<a href="#">卖家培训中心</a>
<a href="#">体验中心</a>
</div>
</li>
<li id="top-nav-five">
<div class="top-nav-list">
<span><a href="#">联系客服</a></span>
<span><img src="素材/icon/21.png" alt=""></span>
</div>
<div class="top-nav-hidden">
<a href="#">消费者客服</a>
<a href="#">卖家客服</a>
</div>
</li>
</ul>
</div>
<script type="text/javascript" src="jQuery/index.js"></script>
</body>
</html>
js代码：
$('.top-nav-list').hover(function(){
$('#hidden').css('display','block')
$('#top-nav-one').css('border-color','gray')
},function(){
$('#hidden').css('display','none')
$('#top-nav-one').css('border-color','transparent')
});
$('#hidden').hover(function(){
$('#hidden').css('display','block')
$('#top-nav-one').css('border-color','gray')
},function(){
$('#hidden').css('display','none')
$('#top-nav-one').css('border-color','transparent')
});
当鼠标移动到 下拉菜单 ，还是会隐藏。就是第二段 js不起作用。
1回答
-
小丸子爱吃菜
2017-12-31
写的代码问题很多：
1、#top-nav-one这个选择器在html中定义的是id选择器么？
2、只有第一个导航项id定义了hidden，后面的导航项有定义id么？如果没有定义，那么就只会有第一个显示。
3、导航项的类名都一样，不能一样，必须是点击不同的项，然后显示各自的。
祝学习愉快！
0
相似问题