Javascript 加载网页后，在树状视图中如何显示子/节点的展开和折叠
我正在使用MVC应用程序。 加载网页后，在树状视图中如何显示子/节点的展开和折叠。若第一个孩子是展开的，那个么若我们点击第二个孩子，第一个孩子应该是折叠的，依此类推 请查看下面的树视图结构。当我运行该网页时，该网页以树形结构显示Javascript 加载网页后，在树状视图中如何显示子/节点的展开和折叠,javascript,jquery,html,twitter-bootstrap,asp.net-mvc-4,Javascript,Jquery,Html,Twitter Bootstrap,Asp.net Mvc 4,我正在使用MVC应用程序。 加载网页后，在树状视图中如何显示子/节点的展开和折叠。若第一个孩子是展开的，那个么若我们点击第二个孩子，第一个孩子应该是折叠的，依此类推 请查看下面的树视图结构。当我运行该网页时，该网页以树形结构显示 Company Maintenance -Employees -Employee Deta
Company Maintenance
-Employees
-Employee Details
Name
Permanent Address
Present Address
Technologies
-Reports
Report1
Report2
Report3
-Employee Maint.
CSE
IT
ECE
CSE
Human Resources
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<script type="text/javascript">
$.fn.extend({
treed: function (o) {
var openedClass = 'glyphicon-minus-sign';
var closedClass = 'glyphicon-plus-sign';
if (typeof o != 'undefined') {
if (typeof o.openedClass != 'undefined') {
openedClass = o.openedClass;
}
if (typeof o.closedClass != 'undefined') {
closedClass = o.closedClass;
}
};
//initialize each of the top levels
var tree = $(this);
tree.addClass("tree");
tree.find('li').has("ul").each(function () {
var branch = $(this); //li with children ul
branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
branch.addClass('branch');
branch.on('click', function (e) {
if (this == e.target) {
var icon = $(this).children('i:first');
icon.toggleClass(openedClass + " " + closedClass);
$(this).children().children().toggle();
}
})
branch.children().children().toggle();
});
//fire event from the dynamically added icon
tree.find('.branch .indicator').each(function () {
$(this).on('click', function () {
$(this).closest('li').click();
});
});
//fire event to open branch if the li contains an anchor instead of text
tree.find('.branch>a').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
//fire event to open branch if the li contains a button instead of text
tree.find('.branch>button').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
}
});
//Initialization of treeviews
$('#tree1').treed({openedClass : 'glyphicon-folder-open', closedClass : 'glyphicon-folder-close'});
$('#tree1 .branch').each(function () {
var icon = $(this).children('i:first');
icon.toggleClass('glyphicon-folder-open glyphicon-folder-close');
$(this).children().children().toggle();
$('#tree1').nestable('collapseAll');
});
</script>
<body>
<table>
<tr>
<td style="width: 30%">
<ul id="tree1">
<li>
<a href="#">TECH</a>
<ul>
<li class="active"><a data-toggle="pill" href="#compmain">Company Maintenance</a></li>
<li>Employees
<ul>
<li>Employee Details
<ul>
<li><a data-toggle="pill" href="#name">Name </a></li>
<li><a data-toggle="pill" href="#peraddr">Perminent Address</a></li>
<li><a data-toggle="pill" href="#presaddr">Present Address </a></li>
<li><a data-toggle="pill" href="#tech">Technologies</a></li>
</ul>
</li>
<li>Reports
<ul>
<li><a data-toggle="pill" href="#report1">Report1 </a></li>
<li><a data-toggle="pill" href="#report1">Report2 </a></li>
<li><a data-toggle="pill" href="#report1">Report3 </a></li>
</ul>
</li>
<li>Department
<ul>
<li><a data-toggle="pill" href="#cse">CSE </a></li>
<li><a data-toggle="pill" href="#it">IT </a></li>
<li><a data-toggle="pill" href="#eee">EEE</a></li>
<li><a data-toggle="pill" href="#ece">ECE</a></li>
</ul>
</li>
</ul>
</li>
<li><a data-toggle="pill" href="#hrinfor">Human Resources</a></li>
</ul>
</li>
</ul>
</td>
<td>
<div class="tab-content">
<div id="compmain" class="tab-pane fade in active">
<h3>Details</h3>
<p>Company Maintainence infor</p>
</div>
<div id="name" class="tab-pane fade">
<h3>Details</h3>
<p>Name of the Employee</p>
</div>
<div id="peraddr" class="tab-pane fade">
<h3>Details</h3>
<p>Perminent Address</p>
</div>
<div id="presaddr" class="tab-pane fade">
<h3>Details</h3>
<p>Present Address</p>
</div>
<div id="report1" class="tab-pane fade">
<h3>Details</h3>
<p>Report 1</p>
</div>
<div id="report2" class="tab-pane fade">
<h3>Details</h3>
<p>Report 2</p>
</div>
<div id="report3" class="tab-pane fade">
<h3>Details</h3>
<p>Report 3</p>
</div>
<div id="cse" class="tab-pane fade">
<h3>Details</h3>
<p>CSE</p>
</div>
<div id="it" class="tab-pane fade">
<h3>Details</h3>
<p>IT</p>
</div>
<div id="ece" class="tab-pane fade">
<h3>Details</h3>
<p>ECE</p>
</div>
<div id="eee" class="tab-pane fade">
<h3>Details</h3>
<p>EEE</p>
</div>
<div id="hrinfor" class="tab-pane fade">
<h3>Details</h3>
<p>List of HR Resources</p>
</div>
</div>
</td>
</tr>
</table>
</body>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<script type="text/javascript">
$.fn.extend({
treed: function (o) {
var openedClass = 'glyphicon-minus-sign';
var closedClass = 'glyphicon-plus-sign';
if (typeof o != 'undefined') {
if (typeof o.openedClass != 'undefined') {
openedClass = o.openedClass;
}
if (typeof o.closedClass != 'undefined') {
closedClass = o.closedClass;
}
};
//initialize each of the top levels
var tree = $(this);
tree.addClass("tree");
tree.find('li').has("ul").each(function () {
var branch = $(this); //li with children ul
branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
branch.addClass('branch');
branch.on('click', function (e) {
if (this == e.target) {
var icon = $(this).children('i:first');
icon.toggleClass(openedClass + " " + closedClass);
$(this).children().children().toggle();
}
})
branch.children().children().toggle();
});
//fire event from the dynamically added icon
tree.find('.branch .indicator').each(function () {
$(this).on('click', function () {
$(this).closest('li').click();
});
});
//fire event to open branch if the li contains an anchor instead of text
tree.find('.branch>a').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
//fire event to open branch if the li contains a button instead of text
tree.find('.branch>button').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
}
});
//Initialization of treeviews
$('#tree1').treed({openedClass : 'glyphicon-folder-open', closedClass : 'glyphicon-folder-close'});
$('#tree1 .branch').each(function () {
var icon = $(this).children('i:first');
icon.toggleClass('glyphicon-folder-open glyphicon-folder-close');
$(this).children().children().toggle();
$('#tree1').nestable('collapseAll');
});
</script>
$.fn.extend({
树型：函数（o）{
var openedClass='glyphicon减号'；
var closedClass='glyphicon加号'；
如果（类型o！=“未定义”）{
if（o.openedClass的类型！=“未定义”）{
openedClass=o.openedClass；
}
if（o.closedClass的类型！=“未定义”）{
closedClass=o.closedClass；
}
};
//初始化每个顶层
var-tree=$（这个）；
addClass（“树”）；
tree.find（'li'）。有（'ul'）。每个（函数（）{
var branch=$（this）；//li与子对象ul
分支。预结束（“”）；
branch.addClass（“branch”）；
“点击”功能（e）上的分支{
if（this==e.target）{
var icon=$（this.children（'i:first'）；
icon.toggleClass（openedClass+“”+closedClass）；
$（this.children（）.children（）.toggle（）；
}
})
branch.children（）.children（）.toggle（）；
});
//从动态添加的图标触发事件
tree.find（'.branch.indicator'）。每个（函数（）{
$（此）.on（'click'，函数（）{
$（this）.最近（'li'）。单击（）；
});
});
//如果li包含锚定而不是文本，则触发事件以打开分支
tree.find（'.branch>a'）。每个（函数（）{
$（此）.on（'click'，函数（e）{
$（this）.最近（'li'）。单击（）；
e、 预防默认值（）；
});
});
//如果li包含按钮而不是文本，则触发事件以打开分支
tree.find（'.branch>button'）。每个（函数（）{
$（此）.on（'click'，函数（e）{
$（this）.最近（'li'）。单击（）；
e、 预防默认值（）；
});
});
}
});
//treeviews的初始化
$（'#tree1'）.treed（{openedClass:'glyphicon folder open'，closedClass:'glyphicon folder close'}）；
$（'#tree1.branch'）。每个（函数（）{
var icon=$（this.children（'i:first'）；
icon.toggleClass（'glyphicon-folder-open-glyphicon-folder-close'）；
$（this.children（）.children（）.toggle（）；
$（'#tree1'）.nestable（'collapseAll'）；
});