老师,为什么js代码没有作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl"><a href="#" class="nav-site-login">亲,请登录</a></li>
<li class="fl"><a href="#" class="nav-site-signup link">免费注册</a></li>
<li class="fl"><a href="#" target="_blank" class="link">手机逛慕淘</a></li>
</ul>
<ul class="fr">
<li class="dropdown fl">
<a href="#" target="_blank" class="dropdown-toggle link">我的慕淘<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer right">
<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="#" target="_blank" class="dropdown-toggle link">收藏夹<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer right">
<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="#" target="_blank" class="nav-site-category link">商品分类</a>
</li>
<li class="dropdown fl">
<a href="#" target="_blank" class="dropdown-toggle link">卖家中心<i class="dropdown-arrow"></i>
</i></a>
<ul class="dropdown-layer right">
<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-services dropdown fl">
<a href="#" target="_blank" class="dropdown-toggle link">联系客服<i class="dropdown-arrow"></i>
</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>
</ul>
</div>
</div>
<script>
window.jQuery||document.write('<script src="js/jquery.js"><\/script>');
window.jQuery||document.write('<script src="js/ui.js"><\/script>');
</script>
</body>
</html>
/*index.css*/
.nav-site{
width:100%;
color:#f3f5f7;
}
.nav-site .container{
height: 44px;
line-height: 44px;
border-bottom:1px solid #cdd0d4;
}
.nav-site .fl{
float: left;
}
.nav-site .nav-site-login{
color: #f01414;
margin-left: 15px;
}
.nav-site .nav-site-signup{
margin:0 10px 0 10px;
}
.nav-site .fr{
float: right;
}
.dropdown{
position: relative;
}
.dropdown-toggle{
position: relative;
z-index: 2;
display:block;
height: 100%;
padding: 0 16px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
.dropdown-arrow {
display: inline-block;
width:8px;
height:6px;
background: url(../img/down.jpg) no-repeat;
margin-left: 8px;
vertical-align: middle;
}
.dropdown-toggle:hover{
background-color: #ffffff;
border-left:1px solid #cdd0d4;
border-right:1px solid #cdd0d4;
}
.nav-site-category{
padding-left:10px;
padding-right:10px;
}
.dropdown-layer{
position: absolute;
display:none;
border-left:1px solid #cdd0d4;
border-right:1px solid #cdd0d4;
border-bottom:1px solid #cdd0d4;
}
.dropdown-item{
display: block;
height:30px;
line-height: 30px;
padding:0 10px 0 10px;
white-space: nowrap;
background-color: #ffffff;
}
.dropdown-item:hover{
background-color: #f3f5f7;
}
.nav-site-services{
margin-right:15px;
}
.dropdown-left{
right:0;
left:auto;
}
/* .dropdown:hover .dropdown-layer{
display: block;
} */
/*ui.js*/
$.fn.dropDown=function(){
var ui=$(this);
$(".dropdown-toggle",ui).on("mouseover",function(){
$(".dropdown-layer").show();
$(".dropdown-arrow").css({"background-image":"url(../img/redDown.jpg)"});
})
$(".dropdown-toggle",ui).on("mouseout",function(){
$(".dropdown-layer").hide();
$(".dropdown-arrow").css({"background-image":"url(../img/down.jpg)"});
})
}
$(".dropdown").dropDown();
正在回答
同学你好,$(this)是小箭头,而小箭头和下拉菜单是兄弟关系,不是父子元素,所以获取不到下拉菜单
参考修改:
自己再测试下,祝学习愉快!
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星