一个按钮 加号 点击这个按钮 然后会弹出二级菜单,同时按钮上的加号变成减号,再次点击按钮变成加号同时二级菜单隐藏
用css该怎么写 js该怎么写
一个按钮 加号 点击这个按钮 然后会弹出二级菜单,同时按钮上的加号变成减号,再次点击按钮变成加号同时二级菜单隐藏
用css该怎么写 js该怎么写
代码如下:{如果对你有帮助,可以点击我这个回答右上方的【采纳】按钮,给我个采纳吗,谢谢}。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
</head>
<body>
<ul class="box">
<li><input type="button" value="+"/> 一级菜单A
<ul style="display: none;">
<li>二级菜单A-a</li>
<li>二级菜单A-b</li>
</ul>
</li>
<li><input type="button" value="+"/> 一级菜单B
<ul style="display: none;">
<li>二级菜单B-a</li>
<li>二级菜单B-b</li>
</ul>
</li>
</ul>
<script type="text/javascript">
var bo = document.querySelectorAll(".box input[type=button]");
for (var i = 0; i < bo.length; i++) {
bo[i].onclick = function () {
if (this.value=="+") {
this.value="-";
this.nextElementSibling.style.display = "block";
} else {
this.value="+";
this.nextElementSibling.style.display = "none";
}
}
}
</script>
</body>
</html>