收缩导航条

最新推荐文章于 2021-06-03 13:10:03 发布

静訫设计

最新推荐文章于 2021-06-03 13:10:03 发布

阅读量588

点赞数 1

分类专栏： jquery 文章标签： jquery收缩导航下拉菜单 web前端

本文链接：https://blog.csdn.net/qq_34273545/article/details/51325052

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html内容

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>导航条的展开与收缩</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.11.2.min.js"></script>
</head>

<body>
    <div class="divFrame">
        <div class="clsHead">
            <h3>图书分类</h3>
            <span><img src="down_arrow.png" alt=""></span>
        </div>

        <div class="clsContent">
            <ul>
                <li><a href="#">小说</a></li>
                <li><a href="#">文艺</a></li>
                <li><a href="#">青春</a></li>
                <li><a href="#">少儿</a></li>
                <li><a href="#">生活</a></li>
                <li><a href="#">社科</a></li>
                <li><a href="#">管理</a></li>
                <li><a href="#">计算机</a></li>
                <li><a href="#">教育</a></li>
                <li><a href="#">工具书</a></li>
                <li><a href="#">引进版</a></li>
                <li><a href="#">其他类</a></li>
             </ul>

             <div class="clsBot"><a href="#">简化</a></div>
        </div>

    </div>

    <script>
        $(document).ready(function(){
            $(".clsHead").click(function(){//图片单击事件
                if($(".clsContent").is(":visible")){//如果内容可见
                    $(".clsHead span img").attr("src","up_arrow.png");//改变图片
                    //隐藏内容
                    $(".clsContent").css("display","none");
                }else{
                    $(".clsHead span img").attr("src","down_arrow.png");//改变图片
                    //显示内容
                    $(".clsContent").css("display","block");

                }
            });

            $(".clsBot>a").click(function(){//热点链接单击事件
                //如果内容为“简化”字样
                if($(".clsBot>a").text()=="简化"){
                    //隐藏index号大于4且不是最后一项的元素
                    $("ul li:gt(4):not(:last)").hide();
                    //将字符内容更改为"更多"
                    $(".clsBot>a").text("更多");
                }else{
                    $("ul li:gt(4):not(:last)").show();
                    //将字符内容改为“简化”
                    $(".clsBot>a").text("简化");

                }

            });
        })
    </script>
</body>
</html>

css内容

/*============================ 导航样式 ============================*/
.divFrame{
    width:300px; overflow:hidden; border:1px solid #ddd;
}
.clsHead{
    height:18px; padding:8px; background-color:#eee;
}
.clsHead h3{
    float:left;
}
.clsHead span{ 
    margin-top:-3px; float:right;
}
.clsContent{
    overflow:hidden;
}
.clsContent ul{

}
.clsContent ul li{
    width:100px; height:24px; line-height:24px; padding:6px 0; text-align:center; float:left;
}
.clsContent .clsBot{
    line-height:30px; padding-right:20px; text-align:right;
}
.clsContent .clsBot a{
    color:#F00;
}

.getFocus{
    background-color:#eee;
}

静訫设计

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
收缩导航条

<!doctype html><html><head><meta charset="utf-8"><title>导航条的展开与收缩</title><link href="css/style.css" rel="stylesheet" type="text/css"><script src="js/jquery-1.11.2.min.js"></script></head><body>
复制链接

扫一扫

专栏目录