如何实现单击一级菜单，显示二级菜单时，一级菜单里的<a>《span》《/span》</a>的《span》的class样式改变
<body>
<div id="content">
<div id="left" class="div_left">
<ul class="mynav " id="myul">
<li><a href="#"><span class="glyphicon glyphicon-home"></span>首页</a></li>
<li class="first"><a href="#"><span class="glyphicon glyphicon-chevron-right" id="span1"></span>合同</a>
<ul>
<li><a href="#"><span class="glyphicon glyphicon-circle-arrow-right"></span>创建合同</a></li>
<li><a href="#"><span class="glyphicon glyphicon-circle-arrow-right"></span>合同变更</a></li>
<li><a href="#"><span class="glyphicon glyphicon-circle-arrow-right"></span>平台方签署合同</a></li>
<li><a href="#"><span class="glyphicon glyphicon-circle-arrow-right"></span>合同页面签署</a></li>
<li><a href="#"><span class="glyphicon glyphicon-circle-arrow-right"></span>授权代签合同</a> </li>
</ul>
</li>
<li class="first"><a href="#"><span class="glyphicon glyphicon-chevron-right"></span>人事档案</a>
<ul>
<li><a href="#">skks</a> </li>
<li><a href="#">skks</a> </li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span>用户注册</a> </li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span>下载合同</a> </li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span>图章管理</a> </li>
</ul>
</div>
<div id="right" class="div_right"></div>
</div>
</body>
window.onload=function(){
var menu=document.getElementById("myul");
var span1=document.getElementById('span1');
var cls=menu.getElementsByClassName("first");//一级菜单
menu.onclick=function(ev){
var e=ev||window.event;
var target=e.target||e.srcElement;
if(target.className=="first"){
if(target.children[0].className=="on"){//二级菜单
target.children[0].className="";
}else{
/*for(var i=0;i<cls.length;i++){
cls[i].children[0].className="";
}*/
target.children[0].className="on";
}
}
};
for(var i=0;i<cls.length;i++)
{
if(cls[i].children[0].className=='on')
{
cls[i].nextNode.className='glyphicon-circle-arrow-right';
}
else {
cls[i].nextNode='glyphicon-right';
}
}
};
追萌1回答
-
书旅
添加一个事件
随时随地看视频慕课网APP
相关分类
JavaScript
JQuery