三级导航收缩下拉框
JS代码
$(function(){ $(".sider_list h2").click(function(){ var m = $(this).next(".h2_list:first"); if(m.is(":visible")){ m.hide(); $(this).removeClass("menu_second02").addClass("menu_second");//下拉按钮图标变化 }
else{ $(".h2_list").hide();
m.show();
$(this).removeClass("menu_second").addClass("menu_second02"); } }); $(".sider_list h1").click(function(){ var n = $(this).next(".h1_list:first"); if(n.is(":visible")){ n.hide(); }else{ $(".h1_list").hide(); n.show(); } }); });
HTML代码
<div class="sider_list"> <h1 class="sider_menu menu_first">动态管理</h1> <div class="h1_list"> <h2 class="sider_menu menu_second" >基本信息</h2> <ul class="h2_list" style="display:none;"> <li><a href="experience pavilion.html" class="sider_menu menu_third">生信息</a></li> <li><a href="essential information.html"class="sider_menu menu_third">基本信息</a></li> <li><a href="ustomer information.html" class="sider_menu menu_third">顾客基本信息</a></li> </ul> <h2 class="sider_menu menu_second">表格列表</h2> <ul class="h2_list" style="display:none;"> <li><a href="behavior disturbance records.html" class="sider_menu menu_third">记录表</a></li> <li><a href="vehicle for approval.html"class="sider_menu menu_third">防筛车辆</a></li> <li><a href="test item.html" class="sider_menu menu_third">检测项目</a></li> <li><a href="screening for feedback.html" class="sider_menu menu_third">反馈统计</a></li> <li><a href="list.html" class="sider_menu menu_third">列表</a></li> <li><a href="parental control.html" class="sider_menu menu_third">家长监督表</a></li> <li><a href="eye chart.html" class="sider_menu menu_third">检测表</a></li> </ul> </div> </div>
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步