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>