bootstrap做的树形菜单,这些菜单数据要从数据库取,js我怎么写,求大神帮助?
//这是js代码$(function(){$('.treeli:has(ul)').addClass('parent_li').find('>span').attr('t...
//这是js代码
$(function(){
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
$('.tree li.parent_li > span').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(":visible")) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
} else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
e.stopPropagation();
});
});
//这是html代码
<ul>
<li>
<span><i class="icon-calendar"></i> 权限操作</span>
<ul>
<li>
<input type="checkbox"/>–<span class="badge badge-success"><i class="icon-minus-sign"></i> 配置管理</span> <ul>
<li> <input type="checkbox"/>–<span class="badge badge-success"> 查看配置列表</span> </li><li> <input type="checkbox"/>–<span class="badge badge-warning"> 新增配置</span></li>
<li> <input type="checkbox"/>–<span class="badge badge-warning"> 修改配置</span>
</li>
<li> <input type="checkbox"/>–<span class="badge badge-important"> 删除配置</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
//这是要实现的效果,这个菜单信息我是写死的 展开
$(function(){
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
$('.tree li.parent_li > span').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(":visible")) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
} else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
e.stopPropagation();
});
});
//这是html代码
<ul>
<li>
<span><i class="icon-calendar"></i> 权限操作</span>
<ul>
<li>
<input type="checkbox"/>–<span class="badge badge-success"><i class="icon-minus-sign"></i> 配置管理</span> <ul>
<li> <input type="checkbox"/>–<span class="badge badge-success"> 查看配置列表</span> </li><li> <input type="checkbox"/>–<span class="badge badge-warning"> 新增配置</span></li>
<li> <input type="checkbox"/>–<span class="badge badge-warning"> 修改配置</span>
</li>
<li> <input type="checkbox"/>–<span class="badge badge-important"> 删除配置</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
//这是要实现的效果,这个菜单信息我是写死的 展开
- 你的回答被采纳后将获得:
- 系统奖励15(财富值+成长值)+难题奖励30(财富值+成长值)
2个回答
展开全部
你好,很高兴为你作答。
使用ajax方法,从后台获取菜单,
组装菜单信息,构件html代码 形如 "<li>.....</li>"。
使用jquery的append或者html等方法将构件的代码嵌入到页面中即可。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询