Html+Js简单实现列表标签菜单下拉

 效果图：

        关闭：

                

        打开： 

                 

 代码：

<ul class="menu">
    <li  p="0" onclick="change(this)">公告管理</li>
        <ul style="display:none;">
            <li><a href="#" target="box">已发布公告</a></li>
            <li><a href="#" target="box">写公告</a></li>
	    </ul>
    <li p="0" onclick="change(this)">信息发布</li>
	    <ul style="display:none;">
	        <li><a href="#" target="box">接种信息</a></li>
		    <li><a href="#" target="box">检测信息</a></li>
	    </ul>
</ul>

<script>
	function change(x){
		if(x.getAttribute("p") == "0"){
			x.setAttribute("p","1");
			$(x).next().show();
		}
		else{
			x.setAttribute("p","0");
			$(x).next().hide();
		}
	}
</script>

------------更新--------------

上面的代码在项目里之前是能用的，一点没改今天打开项目却报错了。。。

把上面的代码单独放在vscode的新页面里，也是可以使用的。。。

没有办法，用jQuery重新写了一下，又能用了，放一下jQuery的代码吧。。。

<ul class="menu">
		<li  p="0" class="xiala">公告管理</li>
		<ul style="display:none">
		    <li><a href="#" target="box">已发布公告</a></li>
		    <li><a href="#" target="box">写公告</a></li>
	    </ul>
		<li p="0" class="xiala">信息发布</li>
		<ul style="display:none">
			<li><a href="#" target="box">接种信息</a></li>
			<li><a href="#" target="box">检测信息</a></li>
		</ul>
		<li><a href="#" target="box">住户管理</a></li>
		<li><a href="#" target="box">个人信息管理</a></li>
</ul>

<script>
$(function(){	
	$(".xiala").click(function(){
		if(this.getAttribute("p") == "0"){
			this.setAttribute("p","1");
			$(this).next().show();
		}
		else{
			this.setAttribute("p","0");
			$(this).next().hide();
		}
	})

}) 
	
</script>