如何在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屋！