欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

BootStrap树状图显示功能

时间:2021-04-11 08:55:50|栏目:jquery|点击:

这是我根据bootstrap的折叠设计的树状图显示,只有二级显示,可以用在简单的目录等

右端可以再次修改,显示为滑动块

- 引用部分

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - 腾实信绩效管理系统</title>
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.min.css" />

HTML代码

<div class=" alert alert-info" style=" width:450px;height:35px;padding-top:0px;padding-left:0;margin-bottom:0;margin-top:10px">
<button type="button" class=" btn btn-link" data-toggle="collapse" data-target="#demo1"><span class=" glyphicon glyphicon-plus"></span></button>
<span>这是一级标题</span>
<input type="checkbox" name=" pageid" value=""style=" float:right; margin-top:10px">
</div>
<div id="demo1" class="collapse in" style=" margin-left:40px;margin-bottom:10px;margin-top:0px">
<div class=" alert alert-info" style=" margin-top:10px; width:410px; height:35px; padding-top:7px; padding-left:15px; margin-bottom:0">
<span>这是二级标题</span>
<input type="checkbox" name=" pageid" value="" style=" float:right;">
</div>
<div class=" alert alert-info" style=" margin-top:10px; width:410px; height:35px; padding-top:7px; padding-left:15px; margin-bottom:0">
<span>这是二级标题</span>
<input type="checkbox" name=" pageid" value="" style=" float:right;">
</div>
<div class=" alert alert-info" style=" margin-top:10px; width:410px; height:35px; padding-top:7px; padding-left:15px; margin-bottom:0">
<span>这是二级标题</span>
<input type="checkbox" name=" pageid" value="" style=" float:right;">
</div>
<div class=" alert alert-info" style=" margin-top:10px; width:410px; height:35px; padding-top:7px; padding-left:15px; margin-bottom:0">
<span>这是二级标题</span>
<input type="checkbox" name=" pageid" value="" style=" float:right;">
</div>
</div>

上一篇:Jquery的hover方法让鼠标经过li时背景变色

栏    目:jquery

下一篇:jQuery命名空间与闭包用法示例

本文标题:BootStrap树状图显示功能

本文地址:http://www.codeinn.net/misctech/98987.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有