JS树形伸展收缩菜单

JavaScript021

JS树形伸展收缩菜单,第1张

var lastFaqClick=null

var expandIndex = 1//设置展开一个

window.onload=function(){

var faq=document.getElementById("faq")

var dls=faq.getElementsByTagName("dl")

for (var i=0,dldl=dls[i]i++){

var dt=dl.getElementsByTagName("dt")[0]//取得标题

dt.id = "faq_dt_"+(Math.random()*100)

dt.onclick=function(){

var p=this.parentNode//取得父节点

if (lastFaqClick!=null&&lastFaqClick.id!=this.id){

var dds=lastFaqClick.parentNode.getElementsByTagName("dd")

for (var i=0,dddd=dds[i]i++)

dd.style.display='none'

}

lastFaqClick=this

var dds=p.getElementsByTagName("dd")//取得对应子节点，也就是说明部分

var tmpDisplay='none'

if (gs(dds[0],'display')=='none')

tmpDisplay='block'

for (var i=0i<dds.lengthi++)

dds[i].style.display=tmpDisplay

}

if(i == expandIndex){

dt.onclick()

}

}

}

//你是页面之间传递参数 还是你用脚本点击按钮等传递参数?

//页面传递的话你直接修改expandIndex值 如果用js修改expandIndex值你再重新调用这函数 也就是重新绑定点击事件 方法很多你随便想想就会有的

最简单的方法就是把二级菜单的样式设置为：

.oe_secondary_submenu {display:none}

然后在点击的时候显示二级菜单：

$(".oe_secondary_submenu").data("onShow")=false    //一开始状态为隐藏

$(".oe_secondary_menu_section").click(function(){

    if($(".oe_secondary_submenu").data("onShow")){  //切换二级菜单的同时改变状态

       $(".oe_secondary_submenu").hide()

       $(".oe_secondary_submenu").data("onShow",false)

    }else{

       $(".oe_secondary_submenu").show()

       $(".oe_secondary_submenu").data("onShow",true)

    }

})

复杂一点的话可以用各种插件