树形左侧菜单栏

最新推荐文章于 2023-07-12 10:52:40 发布

薄荷糖丷微微凉

最新推荐文章于 2023-07-12 10:52:40 发布

阅读量3.7k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/rui512777/article/details/53611826

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         *{margin: 0px; padding: 0px;}
         .list{
             width: 300px;
             margin: 50px auto;
         }
         .list li{
             list-style: none;
             margin-top: 1px;
         }
        .list li a{
            height: 32px;
            width:100%;
            background-color:lightseagreen;
            display: block;
            font-family: 微软雅黑;
            color: azure;
            line-height: 32px;
            vertical-align: middle;
            text-decoration: none;
            text-indent: 1em;
            font-size: 14px;
        }
         .list li a:hover{
             background-color:darkcyan;
         }
        .list li .con p a{
            background-color: aliceblue;
            width:280px;
            color:black;
            font-size: 12px;
            padding-left: 20px;
        }
         .list li .con p a:hover{
             background-color: aliceblue;
             color: darkcyan;
             padding-left: 17px;
             border-left: 3px solid darkcyan;
         }

    </style>
</head>
<body>
    <ul class="list">
        <li>
            <a href="#">web前端开发</a>
            <div class="con">
                <p><a href="#">HTML+CSS</a></p>
                <p><a href="#">Jquery</a></p>
                <p><a href="#">Bootstrap</a></p>
                <p><a href="#">HTML5+CSS3</a></p>
            </div>
        </li>
        <li>
            <a href="#">视觉设计</a>
            <div class="con">
                <p><a href="#">HTML+CSS</a></p>
                <p><a href="#">Jquery</a></p>
                <p><a href="#">Bootstrap</a></p>
                <p><a href="#">HTML5+CSS3</a></p>
            </div>
        </li>
        <li>
            <a href="#">营销培训</a>
            <div class="con">
                <p><a href="#">HTML+CSS</a></p>
                <p><a href="#">Jquery</a></p>
                <p><a href="#">Bootstrap</a></p>
                <p><a href="#">HTML5+CSS3</a></p>
            </div>
        </li>
        <li>
            <a href="#">工业设计</a>
            <div class="con">
                <p><a href="#">HTML+CSS</a></p>
                <p><a href="#">Jquery</a></p>
                <p><a href="#">Bootstrap</a></p>
                <p><a href="#">HTML5+CSS3</a></p>
            </div>
        </li>
        <li>
            <a href="#">游戏动漫</a>
            <div class="con">
                <p><a href="#">HTML+CSS</a></p>
                <p><a href="#">Jquery</a></p>
                <p><a href="#">Bootstrap</a></p>
                <p><a href="#">HTML5+CSS3</a></p>
            </div>
        </li>
    </ul>
    <script src="jquery.min.js"></script>
    <script>
        $(function(){
            var index=0;
            $('.list li .con').hide();
            $('.list li .con').eq(0).show();
           /* $('.list li').click(function(){
                $(this).find('.con').slideDown().parent().siblings().find('.con').slideUp();
            });*/

            $('.list li a').click(function(){
                $(this).siblings('.con').slideDown().parent().siblings().find('.con').slideUp();
            });
        })
    </script>
</body>
</html>

薄荷糖丷微微凉

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
树形左侧菜单栏

html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> *{margin: 0px; padding: 0px;} .list{ width: 300px; margin: 50px auto;
复制链接

扫一扫