jq之导航菜单

jq之导航菜单

<html>  
<head>  
<title>放置文章标题</title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="jquery-3.5.1.min.js"></script>
</head> 
<style>
    html,body,p{
        margin:0;padding:0;
    }
    ul{
        list-style: none;
    }
    span{vertical-align:top;}
    #box{
        width:200px;
        height:100%;
        background-color: black;
        color:#fff
    }
    .icon{
        width:24px;height:24px;vertical-align:top;
    }
    .right{
        float:right;
        padding-right: 10px;
    }
    .ul1{
        padding-left: 0;
        cursor: pointer;
    }
    .ul2{
        padding-left: 10px;
        
    }
    .ul3{
        padding-left: 10px;
        
    }
</style>
<body> 
    <div id="box">
        <ul class="ul1">
            <li>
                <p class="p1"><img class="icon" src="./img/point.png"/><span>一级标题</span><img class="icon right" src="./img/down.png"/></p>
                <ul class="ul2">
                    <li>
                        <p class="p2"><img class="icon" src="./img/point.png"/><span>一级标题</span><img class="icon right" src="./img/down.png"/></p>
                        <ul class="ul3">
                            <li>
                                <p class="p3"><img class="icon" src="./img/point.png"/><span>一级标题</span></p>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body> 
<script>
    $(".p1").click(function() {
        // 修改标题右侧箭头
        let src = $(this).children("img")[$(this).children("img").length - 1]
        $(src).attr("src",$(src).attr("src") === "./img/down.png" ? "./img/up.png" : "./img/down.png")
        // 修改下级目录显隐藏
        $(this).next().css("display",$(this).next().css("display") === "none"? "block" : "none")
    })
    $(".p2").click(function() {
        let src = $(this).children("img")[$(this).children("img").length - 1]
        $(src).attr("src",$(src).attr("src") === "./img/down.png" ? "./img/up.png" : "./img/down.png")
        $(this).next().css("display",$(this).next().css("display") === "none"? "block" : "none")
    })
</script>
</html>

 

posted @ 2021-01-08 14:54  莫小龙  阅读(121)  评论(0)  编辑  收藏  举报