萌新提问 用按钮隐藏和显示二级菜单的问题

一个按钮 加号  点击这个按钮 然后会弹出二级菜单，同时按钮上的加号变成减号，再次点击按钮变成加号同时二级菜单隐藏

用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>

 

要用纯原生的么？像elementui框架都带有这种东西的哦

思路就是二级菜单的显示于隐藏使用js动态切换class。按钮里的+-号使用innerText动态赋值就行

$(".按钮").toggle(

  //   function(){$(".二级").css("display","block");},

  //   function(){$(".二级").css("display","none")}

  // )   

请教下各位大佬为什么这么写没有用

纯原生大概就是这样，简单模拟了一下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 100px;
            border: 1px solid red;
            text-align: center;
            display: none;
        }

        button {
            width: 100px;
            height: 20px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">假设的二级菜单</div>
    <button id="btn">+</button>
    <script>
        let btn = document.getElementById("btn");
        btn.onclick = function () {
            if (this.innerHTML == "+") {
                this.innerHTML = "-";
                document.getElementsByClassName('box')[0].style.display = 'block'
            } else if (this.innerHTML == "-") {
                this.innerHTML = "+";
                document.getElementsByClassName('box')[0].style.display = 'none'
            }
        }
    </script>
</body>

</html>

 

您的问题已经有小伙伴解答了，请点击【采纳】按钮，采纳帮您提供解决思路的答案，给回答的人一些鼓励哦～～

ps:开通问答VIP，享受5次/月 有问必答服务，了解详情↓↓↓

【电脑端】戳>>>  https://vip.csdn.net/askvip?utm_source=1146287632
【APP 】  戳>>>  https://mall.csdn.net/item/52471?utm_source=1146287632