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

老师,为什么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();



正在回答

登陆购买课程后可参与讨论,去登陆

3回答

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

http://img1.sycdn.imooc.com//climg/5f49d608093b311007950071.jpg

参考修改:

http://img1.sycdn.imooc.com//climg/5f49d66109b03ce006710435.jpg

自己再测试下,祝学习愉快!

好帮手慕星星 2020-08-29 09:48:17

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

http://img1.sycdn.imooc.com//climg/5f49b3b109c1a22207270188.jpg

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

祝学习愉快!

  • 提问者 May_seven #1
    老师,改成如下代码为什么不行呢 $.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)"}); }) }
    2020-08-29 10:42:41
好帮手慕星星 2020-08-28 10:14:54

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

http://img1.sycdn.imooc.com//climg/5f4867e4096840e505110181.jpg

指的是什么没有作用呢?是下拉菜单不能显示,还是小箭头图片不能切换。如果是小箭头的话,建议检查图片路径是否正确。样式是直接加在标签中的,所以检查是否还需要../上一级的路径,老师这边需要去掉才可以显示,文件夹关系为

http://img1.sycdn.imooc.com//climg/5f48686f09a756ea01470091.jpg

如果没有解决疑问,建议描述具体一些,便于帮助解决。

祝学习愉快!

  • 提问者 May_seven #1
    老师,这样点任何一个dropdown全都下拉了,一一对应要如何改
    2020-08-29 00:03:54
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师