CSS+JavaScript 三级分类菜单

lemontree-xy

于 2023-06-04 20:40:24 发布

阅读量167

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_43337481/article/details/131036782

版权

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS+JavaScript三级分类菜单</title>
<style>
*,body,ul,li,h1,h2 {
margin: 0;
padding: 0;
list-style: none;
}

body {
font: 12px;
padding-top: 20px;
}

dl {display: flex;}
dt {margin-right:10px;}

#menu {
width: 1000px;
margin: auto;
}

#menu h1 {
cursor: pointer;
font-size: 12px;
   margin-right: 10px;
   display: inline;
}

#menu h2 {
cursor: pointer;
   display: inline;
color: #777;
font-size: 12px;
}

#menu ul {
height: auto;
}

#menu ul li {
   display: inline;
}

.min {
   display: flex;
}

.no {
display: none;
}
</style>
<script language="JavaScript">
function ShowMenu(obj, noid) {
var block = document.getElementById(noid);
var n = noid.substr(noid.length - 1);
           var min = document.getElementById("min");
           var child = document.getElementById("child");

if (noid.length == 4) {
var ul = document.getElementById(noid.substring(0, 3)).getElementsByTagName("ul");
var h2 = document.getElementById(noid.substring(0, 3)).getElementsByTagName("h2");
for (var i = 0; i < h2.length; i++) {
h2[i].style.color = "";
}
obj.style.color = "#FF0000";

for (var i = 0; i < ul.length; i++) {
if (i != n) {
ul[i].className = "no";
}
}
} else {
var div = document.getElementById("menu").getElementsByTagName("div");
var h1 = document.getElementById("menu").getElementsByTagName("h1");

for (var i = 0; i < h1.length; i++) {
h1[i].style.color = "";
}
obj.style.color = "#0000FF";

for (var i = 0; i < div.length; i++) {
if (i != n) {
div[i].className = "no";
}
}
}

if (block.className == "no") {
block.className = "";
} else {
block.className = "no";
obj.style.color = "";
}
}
</script>
</head>

<body>
<div id="menu">
       <section>
           <span>大类：</span>
           <span id="min" class="no">小类：</span>
           <span id="child" class="no">子类：</span>
       </section>

<h1>全部</h1><h1 onClick="javascript:ShowMenu(this,'NO0')">一级菜单A</h1> <h1 onClick="javascript:ShowMenu(this,'NO1')">一级菜单B</h1>

           <div id="NO0" class="no">
               <h2 onClick="javascript:ShowMenu(this,'NO00')"> - 二级菜单A_1</h2>
               <h2 onClick="javascript:ShowMenu(this,'NO01')"> - 二级菜单A_2</h2>
               <h2 onClick="javascript:ShowMenu(this,'NO02')"> - 二级菜单A_3</h2>
               <h2 onClick="javascript:ShowMenu(this,'NO03')"> - 二级菜单A_4</h2>

                   <ul id="NO00" class="no">
                   <li><a href="">3级菜单A_0</a></li>
                   <li>3级菜单A_1</li>
                   <li>3级菜单A_2</li>
                   <li>3级菜单A_3</li>
               </ul>

               <ul id="NO01" class="no">
                   <li>3级菜单A_0</li>
                   <li>3级菜单A_1</li>
                   <li>3级菜单A_2</li>
                   <li>3级菜单A_3</li>
                   <li>3级菜单A_4</li>
               </ul>

               <ul id="NO02" class="no">
                   <li>3级菜单A_0</li>
                   <li>3级菜单A_1</li>
                   <li>3级菜单A_2</li>
                   <li>3级菜单A_3</li>
                   <li>3级菜单A_4</li>
                   <li>3级菜单A_5</li>
               </ul>

               <ul id="NO03" class="no">
                   <li>3级菜单A_0</li>
                   <li>3级菜单A_1</li>
                   <li>3级菜单A_2</li>
                   <li>3级菜单A_3</li>
                   <li>3级菜单A_4</li>
                   <li>3级菜单A_5</li>
                   <li>3级菜单A_6</li>
               </ul>
           </div>
           <div id="NO1" class="no">
           <h2 onClick="javascript:ShowMenu(this,'NO10')"> - 二级菜单B_1</h2>
           <h2 onClick="javascript:ShowMenu(this,'NO11')"> - 二级菜单B_2</h2>
           <ul id="NO10" class="no">
               <li>3级菜单B_0</li>
               <li>3级菜单B_1</li>
               <li>3级菜单B_2</li>
               <li>3级菜单B_3</li>
               <li>3级菜单B_4</li>
               <li>3级菜单B_5</li>
               <li>3级菜单B_6</li>
               <li>3级菜单B_7</li>
           </ul>

           <ul id="NO11" class="no">
               <li>3级菜单B_0</li>
               <li>3级菜单B_1</li>
               <li>3级菜单B_2</li>
               <li>3级菜单B_3</li>
           </ul>
           </div>
</div>
</body>

</html>