SOURCE

console 命令行工具 X clear

                    
>
console
var gdiv=document.getElementById('div1');
var gul=document.getElementById('menu');
var lis=gul.getElementsByTagName('li');
var dls=gul.getElementsByTagName('dl');
var giframe=document.getElementsByTagName('iframe')[0];

var arr=[['https://hao.360.com/',2,3,4],['a','b','https://www.huanqiu.com/','d'],[5,6,7,8]]


for (var i=0; i<lis.length; i++){
   
    lis[i].index=i;
    lis[i].onclick=function(){
        for (var i=0; i<lis.length; i++){
            lis[i].className="";
            dls[i].style.display="none";
        }
         
        this.className="active";
        dls[this.index].style.display="block";
        
        var x=this.index;
       
        var dds=dls[this.index].getElementsByTagName('dd');
        for (var i=0; i<dds.length; i++){
            dds[i].index=i;
            dds[i].onclick=function(){
                alert(x+'+'+this.index)
                alert(arr[x][this.index])
                giframe.src=arr[x][this.index];
            }
        }

    }
}

   lis[0].onclick();

<div id="div1">
    <ul id="menu">
        <li class="active">菜单1li</li>
            <dl style="display:block;">
                <dd>360</dd>
                <dd>菜单1.dd</dd>
                <dd>菜单1.dd</dd>
                <dd>菜单1.dd</dd>
            </dl>
        <li>菜单2</li>
            <dl>
                <dd>菜单2.</dd>
                <dd>菜单2.</dd>
                <dd>菜单2.</dd>
                <dd>菜单2.</dd>
            </dl>
        <li>菜单3</li>
            <dl>
                <dd>菜单3.</dd>
                <dd>菜单3.</dd>
                <dd>菜单3.</dd>
                <dd>菜单3.</dd>
            </dl>
    </ul>
</div>


<iframe src="" width="500" height="500"> 
该网站使用了框架技术,但是您的浏览器不支持框架,请升级您的浏览器以便正常访问。 
</iframe> 
#div1 {width:200px; margin:15px 0; line-height:25px;}

ul {list-style:none;}

li {background:#ccc;margin-bottom:3px;}

dl {background:#eee;display:none;

    transform-origin:50% 0;

    -webkit-animation:gary .5s ease-in;

    transition: all .3s infinite;}

.active {background:#F90;}

dl dd:hover{
    color:red;
}

@-webkit-keyframes gary{

    0%{transform:scale(1,0);}

    25%{transform:scale(1,1.2);}

    50%{transform:scale(1,0.85);}

    75%{transform:scale(1,1.05);}

    100%{transform:scale(1,1);}

}