<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生js實現二級伸縮菜單</title> <style> *{ margin:0; padding:0; } ul,li{ list-style: none; } .closed{ display: block; width: 200px; background-color: coral; } #manager ul li{ width: 200px; line-height: 30px; text-align: center; cursor: pointer; } .hide{ display: none; } .show{ display: block; } .open{ display: block; background-color: coral; } .hide{ display: none; } #manager ul li.pro{ border:1px solid #fff; } #manager ul li ul li{ padding:3px 0; border: 0; color:lightgray; line-height: 20px; border-top:1px solid #fff; background-color: darkorchid; } #manager ul li ul li:hover{ color: #fff; } #manager ul li ul li:last-child{ border-bottom:1px solid #fff; } </style> </head> <body> <div id="manager"> <ul class="tree"> <li class="pro"> <span class="open" onclick="toggleTable(this)">考勤管理</span> <ul class="show"> <li>日常考勤</li> <li>請假申請</li> <li>加班/出差</li> </ul> </li> <li class="pro"> <span class="closed" onclick="toggleTable(this)">信息中心</span> <ul class="hide"> <li>通知公告</li> <li>公司新聞</li> <li>規章制度</li> </ul> </li> <li class="pro"> <span class="closed" onclick="toggleTable(this)">協同辦公</span> <ul class="hide"> <li>公文流轉</li> <li>文件中心</li> <li>內部郵件</li> <li>即時通訊</li> <li>短信提醒</li> </ul> </li> <li class="pro"> <span class="closed" onclick="toggleTable(this)">合同管理</span> <ul class="hide"> <li>內部合同</li> <li>外部合同</li> <li>到期合同</li> <li>未簽合同</li> <li>保密合同</li> </ul> </li> <li class="pro"> <span class="closed" onclick="toggleTable(this)">人事流程</span> <ul class="hide"> <li>人事入職</li> <li>職工保險</li> <li>職工升值</li> <li>薪資計划</li> <li>員工福利</li> </ul> </li> <li class="pro"> <span class="closed" onclick="toggleTable(this)">客戶管理</span> <ul class="hide"> <li>企業客戶</li> <li>一般客戶</li> <li>重要客戶</li> <li>小區客戶</li> <li>外地客戶</li> </ul> </li> </ul> </div> <script src="js/jquery-3.2.1.min.js"></script> <script> function toggleTable(span){ // 如果span的class為open if(span.className=="open"){ // 將span的class設為closed span.className="closed"; // 將span的下一個兄弟元素的class改為hide span.nextElementSibling.className="hide"; }else{//否則 // 查找class為tree的元素下的一個class為open的span,保存在open中 var open=document.querySelector("[class=tree] span[class=open]"); if(open!=null){ // 設置open的class為closed open.className="closed"; // 設置open的下一個兄弟元素的class為hide open.nextElementSibling.className="hide"; } span.className="open"; span.nextElementSibling.className="show"; } } </script> </body> </html>