为了账号安全,请及时绑定邮箱和手机立即绑定

老师讲的很清晰,做题就像照葫芦画瓢

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

    *{margin:0;

     padding:0;

     font-size:13px;

     list-style:none;}


.menu{width:210px;

      margin:50px auto;

      border:1px solid #ccc;}


.menu p{height:25px;

        line-height:25px;

        font-weight:bold;

        background:#eee;

        border-bottom:1px solid #ccc;

        cursor:pointer;

        padding-left:5px;}


.menu div ul{display:none;}


.menu li{height:24px;

         line-height:24px;

         padding-left:5px;}

</style>


<body>

<div class="menu" id="menu">

<div>

<p>Web前端</p>

<ul style="display:block">

<li>JavaScript</li>

<li>DIV+CSS</li>

<li>jQuery</li>

</ul>

</div>

<div>

<p>后台脚本</p>

<ul>

<li>PHP</li>

<li>ASP.net</li>

<li>JSP</li>

</ul>

</div>

<div>

<p>前端框架</p>

<ul>

<li>Extjs</li>

<li>Esspress</li>

<li>YUI</li>

</ul>

</div>

</div>

<script type="text/javascript">

window.onload=function(){


      // 将所有点击的标题和要显示隐藏的列表取出来

var pt = document.getElementsByTagName('p');

var ul =document.getElementsByTagName('ul');

     // 遍历所有要点击的标题且给它们添加索引及绑定事件

for (var i = 0;i<pt.length;i++) {

pt[i].id =i;

pt[i].onmousedown=function(){

console.log(this.id)

// 获取点击的标题上的索引属性,根据该索引找到对应的列表

// 判断该列表,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来

for (var  j =0;j<pt.length;j++) {

ul[j].style.display = 'none';

}

ul[this.id].style.display='block';


 


}

}

     


    


}

</script>

</head>

</body>

</html>


正在回答

2 回答

还要有自己的思维同学

0 回复 有任何疑惑可以回复我~

可以呀,把代码都写了

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

老师讲的很清晰,做题就像照葫芦画瓢

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信