原生js+css实现二级伸缩菜单
Posted yingleiming
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js+css实现二级伸缩菜单相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于原生js+css实现二级伸缩菜单的主要内容，如果未能解决你的问题，请参考以下文章
WordPress用JavaScript和CSS实现二级菜单展开手风琴效果
用原生JS写关于鼠标移入移出ul的二级菜单问题，怎么都实现不了效果