老师，为什么js代码没有作用

首页课程实战体系课手记专栏慕课教程

老师，为什么js代码没有作用

来源：3-5 让菜单下拉

May_seven

2020-08-27 23:51:21

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<li class="fl"><a href="#" target="_blank" class="link">手机逛慕淘</a></li>

</ul>

<li><a href="#" target="_blank" class="dropdown-item">已买到的宝贝</a></li>

</ul>

</li>

<li><a href="#" target="_blank" class="dropdown-item">收藏的宝贝</a></li>

<li><a href="#" target="_blank" class="dropdown-item">收藏的店铺</a></li>

</ul>

</li>

</li>

</i></a>

<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>

</i></a>

</ul>

</li>

</ul>

</div>

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();

写回答

3回答

好帮手慕星星

2020-08-29

已采纳

同学你好，$(this)是小箭头，而小箭头和下拉菜单是兄弟关系，不是父子元素，所以获取不到下拉菜单

参考修改：

自己再测试下，祝学习愉快！

好帮手慕星星

2020-08-29

同学你好，代码中获取的是所有下拉菜单，所以移入的时候都会显示。可以修改为获取触发事件元素中的下拉菜单

因为a和li大小一致，所以$(e.target)获取的是a元素，就需要next()下一个元素也就是下拉菜单显示。

祝学习愉快！

hay_seven

h 老师，改成如下代码为什么不行呢 $.fn.dropDown=function(){ var ui=$(this); $(".dropdown-toggle",ui) .on("mouseover",function(){ var over=$(this); $(".dropdown-layer",over).show(); $(".dropdown-arrow",over).css({"background-image":"url(img/redDown.jpg)"}); }) $(".dropdown-toggle",ui).on("mouseout",function(){ var out=$(this); $(".dropdown-layer",out).hide(); $(".dropdown-arrow",out).css({"background-image":"url(img/down.jpg)"}); }) }

h020-08-29

共1条回复

好帮手慕星星

2020-08-28

同学你好，这边测试代码效果没有问题