1.套用模板，将菜单的相关信息直接放在脚本数据中，使用循环生成

 

　　

 

　　<scriptid="templateNavBar"type="text/html">

 

　　<pclass="nav-bar-logo">

 

　　</p>

 

　　{{each$dataasitemi}}

 

　　<pclass="nav-item{{item.class}}">{{item.name}}</p>

 

　　{{ifitem.child!=null}}

 

　　<pclass="childgroup">

 

　　{{eachitem.childaschildi}}

 

　　<pclass="nav-item{{child.class}}child">{{child.name}}</p>

 

　　{{/each}}

 

　　</p>

 

　　{{/if}}

 

　　{{/each}}

 

　　</script>

 

　　2.在js中通过添加类open的方式来实现菜单的折叠和展开

 

　　

 

　　$(document).on('click','.nav-item:not(.child)',function(){

 

　　console.log("choosing");

 

　　varthat=$(this);

 

　　varnext=that.next();

 

　　if(next.hasClass('childgroup')){

 

　　if(that.hasClass('open'))

 

　　{

 

　　//收起当前菜单项

 

　　that.removeClass('open');

 

　　next.slideUp();

 

　　}

 

　　else{

 

　　//将其他打开的菜单项收起来

 

　　if($('.nav-item:not(.child).open').next().hasClass('childgroup'))

 

　　{

 

　　$('.nav-item:not(.child).open').next().slideUp();

 

　　$('.nav-item:not(.child).open').removeClass('open');

 

　　}

 

　　//激活当前菜单项

 

　　that.addClass('open');

 

　　next.slideDown();

 

　　}

 

　　}

 

　　//监听一级菜单结束






本文转载自中文网