如何在MVC和angularjs中单击时展开树视图 [英] How to expand tree view on click in MVC and angularjs
问题描述
从数据库绑定树视图,文本悬停树视图正在扩展,但我想扩展点击
i写了jquery来扩展treeview但它是不工作
我尝试了什么:
.cshtml
< div ng-controller = menuController class = treeview >
< ; table width < span class =code-keyword> = 150px >
< tr >
< td >
< script type = text / ng-template id = treeMenu >
< a href = # > {{menu.Name}} < / a >
< ; ul ng-if = (SiteMenu | filter:{ParentID:menu.Id})。length> 0 >
< li ng-repeat = 菜单| filter:{ParentID:menu.Id}:true ng-include = 'treeMenu' > < / li >
< span class =code-keyword>< / ul >
< / script >
< ul class = 主要导航 >
< li <在SiteMenu中使用span class =code-attribute> ng-repeat = 菜单filter:{ParentID:0}:true ng-include = 'treeMenu' > < / li >
< / ul >
< span class =code-keyword>< / td >
< / tr >
< / table >
< / div >
<脚本>
$( document )。ready( function (){
$(< span class =code-string> 。treeview li> ul)。css(' display',' none');
$( a)。click( function (e){
e.preventDefault();
$( this )。 toggleClass( 折叠展开);
$( this )。nearest(' li')。children(' ul')。slideToggle();
});
});
< / script>
}
< pre lang =CSS>< style>
li ul {
display : none;
}
li:hover > ul {
display : block;
}
。 treeview ul {
font : 14px Arial,Sans-Serif;
margin : 0px;
padding-left : 20px;
}
。 treeview > li > a {
font-weight : 粗体;
}
。 treeview < span class =code-leadattribute> li a {
padding < span class =code-keyword>: 4px;
font-size : 12px;
display : in line-block;
text-decoration : none;
width : auto;
}
。 collapse {
显示 : inline-block;
游标 : 指针;
}
。 expand {
display : inline-block;
cursor : 指针;
}
< / style >
( document )。ready( function (){
( .treeview li> ul)。css(' display',' none');
( a)。click( function (e){
e.preventDefault();
am binding tree view from database,on text hover tree view is expanding, but i want to expand on click
i have written jquery to expand treeview but it is not working
What I have tried:
.cshtml
<div ng-controller="menuController" class="treeview">
<table width="150px">
<tr>
<td>
<script type="text/ng-template" id="treeMenu">
<a href="#">{{menu.Name}}</a>
<ul ng-if="(SiteMenu | filter:{ParentID : menu.Id}).length > 0">
<li ng-repeat="menu in SiteMenu | filter:{ParentID : menu.Id} : true" ng-include="'treeMenu'"></li>
</ul>
</script>
<ul class="main-navigation">
<li ng-repeat="menu in SiteMenu | filter:{ParentID : 0} : true" ng-include="'treeMenu'"></li>
</ul>
</td>
</tr>
</table>
</div>
<script>
$(document).ready(function () {
$(".treeview li>ul").css('display', 'none');
$("a").click(function (e) {
e.preventDefault();
$(this).toggleClass("collapse expand");
$(this).closest('li').children('ul').slideToggle();
});
});
</script>
}
<style>
li ul {
display: none;
}
li:hover > ul {
display: block;
}
.treeview ul {
font: 14px Arial, Sans-Serif;
margin: 0px;
padding-left: 20px;
}
.treeview > li > a {
font-weight: bold;
}
.treeview li a {
padding: 4px;
font-size: 12px;
display: inline-block;
text-decoration: none;
width: auto;
}
.collapse {
display: inline-block;
cursor: pointer;
}
.expand {
display: inline-block;
cursor: pointer;
}
</style>
(document).ready(function () {
(".treeview li>ul").css('display', 'none');
("a").click(function (e) { e.preventDefault();
这篇关于如何在MVC和angularjs中单击时展开树视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!