1.先来一个的，就是一个ul菜单主里面包含一个a标签和一个ol子菜单，代码如下：
<head>
<meta charset="UTF-8">
<title>折叠菜单</title>
<!--设置页面加载完成后子菜单样式为隐藏 -->
<style>
#ool {
display:none;
}
</style>
</head>
<body>
<ul>
<li>
<a href="###" onclick="show();">主菜单</a>
<ol id="ool">
<li><a href="">子菜单1</a></li>
<li><a href="">子菜单2</a></li>
<li><a href="">子菜单3</a></li>
</ol>
</li>
</ul>
<script>
var i = 0; //先定义一个全局变量并赋值为0；
function show() { //定义一个函数show();
if(i == 0){
document.getElementById(‘ool‘).style.display = ‘block‘;
i = 1;
}else{
document.getElementById(‘ool‘).style.display = ‘none‘;
i = 0;
}
}
</script>
</body>
2.当主菜单有好几个的时候，这他喵就麻烦了。下面这个方法是请教老师的。
？？？？：为什么自己没有这种思维和方法？
就来三个主菜单吧，代码如下：
<head>
<meta charset="UTF-8">
<title>折叠菜单</title>
<!--设置页面加载完成后子菜单样式为隐藏 -->
<style>
ol {
display:none;
}
</style>
</head>
<body>
<ul>
<li>
<a href="###" status="0" onclick="show(this);">主菜单1</a><ol > //注意这里：因为下面JS用到了nextSibling这个获取a标签下一个兄弟元素的方法，所以 <ol>要紧贴</a>，不能留空格，要不获取不到ol标签。还有就是show(this) 里面的this代表当前对象；也就是a标签，下面的obj就是它的形参，a为实参。
<li><a href="">子菜单1</a></li>
<li><a href="">子菜单2</a></li>
<li><a href="">子菜单3</a></li>
</ol>
</li>
<li>
<a href="###" status="0" onclick="show(this);">主菜单2</a><ol >
<li><a href="">子菜单1</a></li>
<li><a href="">子菜单2</a></li>
<li><a href="">子菜单3</a></li>
</ol>
</li>
<li>
<a href="###" status="0" onclick="show(this)">主菜单3</a><ol>
<li><a href="" >子菜单1</a></li>
<li><a href="">子菜单2</a></li>
<li><a href="">子菜单3</a></li>
</ol>
</li>
</ul>
<script>
//在写函数之前先给每个主菜单下的a标签设置一个状态属性，也就是代码中的status=‘0‘；和上面一个主菜单时设置i=‘0‘时一样的道理。
function show(obj) { //定义一个含有参数的函数show()；参数obj其实就是代表主菜单下的a标签；
var i = obj.getAttribute(‘status‘); //获取obj的属性status；
if(i == 0){
obj.nextSibling.style.display = ‘block‘; //obj(a)下一个兄弟元素也就是ol标签的样式中的display属性从默认的‘none‘变为‘block‘；
obj.setAttribute(‘status‘,1); //设置obj(a)的状态属性也就是开始就设置的status从开始的0变为1；
}else{
obj.nextSibling.style.display = ‘none‘;
obj.setAttribute(‘status‘,0);
}
}
</script>
</body>
从上面看到，其实JS代码也是极少，主要还是要学习和培养这中思维。不是不懂，是想不到...........
时间： 2024-10-29 03:10:38