Как развернуть древовидное представление по щелчку мыши в MVC и angularjs

---

я привязываю древовидное представление из базы данных, при наведении текста древовидное представление расширяется, но я хочу развернуться по щелчку мыши

я написал jquery для расширения treeview, но он не работает

Что я уже пробовал:

.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>

---