js

<script>
            window.onload = function(){
                //獲得所有得段落元素
                var ps = document.getElementsByTagName("p")
                //獲得所有無序列表
                var uls = document.getElementsByTagName("ul")
                for(var i =0,n=ps.length;i<n;i+=1){
                    
 
//遍歷段落
                    ps[i].id = i//新增到段落索引
                    ps[i].onclick = function(){//新增點選事件
                        if(uls[this.id].style.display!="block"){//如果無序列表為隱藏狀態
                            for(var j = 0;j<n;j+=1){//遍歷無序列表
                                uls[j].style.display = "none"
                            }
                            uls[
 
this.id].style.display="block"//點選以後顯示無序列表
                        }    
                        else{
                            //當前已顯示的無序列表，再次點選後隱藏
                            uls[this.id].style.display="none"
                        }
                    }
                    
                    
                }
            }
        
 
</script>

css

<style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                font-size: 14px;
            }
            a{
                text-decoration: none;
            }
            .menu{
                width: 210px;
                margin: 50px auto;
            }
            
            .menu p{
                color: #fff;
                height: 35px;
                cursor: pointer;
                line-height: 35px;
                background: #2980b9;
                border-bottom: 1px solid #ccc;
            }
            
            .menu ul{
                list-style:none;
                display: none;
                /*預設隱藏無序列表*/
            }
            
            .menu ul li{
                height: 33px;
                line-height: 33px;
                padding-left: 5px;
                background: #eee;
                border-bottom: 1px solid #ccc;
            }
            
        </style>

html

<div class="menu" id="menu">
			<div>
				<p>新聞管理</p>
			<ul>
				<li>使用者管理</li>
				<li>使用者管理</li>
			</ul>
			<p>新聞管理</p>
			<ul>
				<li>使用者管理</li>
				<li>使用者管理</li>
			</ul>
			<p>新聞管理</p>
			<ul>
				<li>使用者管理</li>
				<li>使用者管理</li>
			</ul>
			</div>
		</div>