<!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">
    <title>Document</title>
    <style>
        #d1{
            width: 300px;
            height: 900px;
            background: #ccc;
        }
        #d2{
            height: 20px;
            background: blue;
            color: white;
            padding: 10px;
        }
        #a1,#a2{
             /*
            border: 2px solid red;

           
            display: block;
            display: none;
            */
        }
        li{
            list-style: none;
        }
       
    </style>

    <script>
        window.onload=function(){
            //alert("ddddddd");

            // var v1=document.getElementById("a1");
            // var v2=document.getElementById("a2");
	        // var v3=document.getElementById("a3");
            // v1.style.display="block";
            // v2.style.display="none";
	        // v3.style.display="none";
            var array= document.getElementsByTagName("ul");
            //alert(array.length);
            for(var i=0; i<array.length; i++){
                array[i].style.display="none";
            }
        }

        //var flag=0;  

        function fn01(x){
            var a=document.getElementById(x);
            // alert(a.style.display=="none");
            if(a.style.display=="none"){
                a.style.display="block";
            }else if(a.style.display=="block"){
                a.style.display="none";
            }
            
        }

       
    </script>
</head>
<body>
    <div id="d1">
        <div id="d2">我的菜单</div>
        <div id="d3">

                <li onclick="fn01('a1');">三国</li>
                <ul id="a1">
                    <li>马超</li>
                    <li>大乔</li>
                    <li>小乔</li>
                </ul>
                <li onclick="fn01('a2');">西方神话</li>
                <ul id="a2">
                    <li>阿波罗</li>
                    <li>普罗米修斯</li>
                </ul>
                <li onclick="fn01('a3');">西方神话2</li>
                <ul id="a3">
                    <li>阿波罗</li>
                    <li>普罗米修斯</li>
                </ul>
                <li onclick="fn01('a4');">西方神话3</li>
                <ul id="a4">
                    <li>阿波罗</li>
                    <li>普罗米修斯</li>
                </ul>
        </div>
    </div>
</body>
</html>