为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我跟老师照着敲得,第一是背景图没有占100%;第二点击收起没有效果,哪位大神有时间给解释一下呗!!!

求解??

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>特效菜单</title>
    <style>
        .navlist{
            position: absolute;
            top: 10px;
        }
        a{
            text-decoration: none;
            color: white;
        }
        .navlist a{
            margin-left:60px;
            color: #666;
        }
        /*展开层*/
        .expand{
            height:0px;
            background-color: #333d4d;
            overflow: hidden;
            position: relative;
            top:30px;
            width: 100%;
        }
        /*二级菜单外层*/
        .expdiv{
            height:130px;
            width: 500%;
        }
        /*二级菜单样式*/
        .expdiv-list{
            width:20%;
            text-align: center;
            float: left;
            line-height: 110px;
            color: white;
        }
        .expand .close-btn{
            width: 120px;
            height: 20px;
            background: url(images/broswer_home.png) no-repeat -13px -117px;
            position: absolute;
            left: 50%;
            bottom: -2px;
            margin-left: -60px;
            cursor: pointer;
        }

    </style>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script>
            $(function(){
                $("#menuList").on("click","a",function(){

                        if($(this).hasClass("btn-active")){
                            $("#expandZone #closeBtn").click();
                            return false;
                        }

                    var curIndex=$(this).index(),mlValue="-"+curIndex*100+"%";

                        if($("#expandZone").hasClass("active")){
                            $("#expandZone .expdiv").animate({marginLeft:mlValue});

                        }else{
                            $("#expandZone .expdiv").css({margineLft:mlValue});
                    $("#expandZone").animate({height:"130px"}).addClass("active");
                        }

                        $(this).addClass("btn-active").siblings().removeClass("btn-active");

                        return false;
                    
                })

                $("#expandZone closeBtn").on("click",function(){
                        $("#expandZone").animate({height:"0px"},function(){
                            $(this).relativeClass("active");
                            $("menuList .btn-active").removeClass("btn-active");
                        });
                        return false;
                        
                    });
            })
    </script>
</head>
<body>
    <div id="menuList"><!--一级菜单-->
        <a href="#">首页</a>
        <a href="#">课程大厅</a>
        <a href="#">学习中心</a>
        <a href="#">关于我们</a>
        <a href="#">个人中心</a>
        <div id="expandZone"><!--二级菜单展开层-->
            <div><!--二级菜单集合层-->
                <div><!--二级菜单-->
                    <a href="#">慕课网主页</a>
                </div>
                <div>
                    <a href="#">前端课程</a>
                    <a href="#">手机开发</a>
                    <a href="#">后台编程</a>
                </div>
                <div>
                    <a href="#">javascript</a>
                    <a href="#">css</a>
                    <a href="#">jQuery</a>
                </div>
                <div>
                    个人信息
                </div>
                <div>
                公司地址:111111111
                </div>
            </div>
            <div id="closeBtn"><!--关闭按钮-->
            </div>
        </div>        
    </div>
</body>
</html>

正在回答

3 回答

你那个关闭按钮给的是 id="closeBtn",然后style里的是  .expand .close-btn,看看你的style里的内容,仔细改一下,

 .expdiv-list{
            width:20%;
            text-align: center;
            float: left;
            line-height: 110px;
            color: white;
        }

你的body里没有定义.expdiv-list,也要定义一下。

综上所诉,你的style和你的body里的id或class不对应,你在看看

0 回复 有任何疑惑可以回复我~

html结构有问题,你再好好看一下,错误一大堆。

0 回复 有任何疑惑可以回复我~

求助哪位大神帮忙看一下是什么问题

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
形形色色的下拉菜单
  • 参与学习       106972    人
  • 解答问题       543    个

本教程从易到难,循循渐进,运用不同技术实现动态下拉菜单

进入课程

为什么我跟老师照着敲得,第一是背景图没有占100%;第二点击收起没有效果,哪位大神有时间给解释一下呗!!!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信