Как настроить эту функцию JQuery для меню аккордеона в AngularJS?

Question

Я интегрировал некоторые функции jQuery в мое приложение angularJS. Однако они не работают точно так же, как оригинальные функции jquery. Это мой текущий код:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

 $scope.accMenuItem = function(e) {   
     var item = $(e.target);
     item.parent().next().slideUp();

     item.parent().next().is(":visible") ||
     item.parent().next().slideDown();

     e.stopPropagation();
 };

 $scope.accSubMenuItem = function(e) {
     var item = $(e.target);
     item.parent().next().slideUp();

     item.parent().next().is(":visible") ||
     item.parent().next().slideDown();  

     e.stopPropagation();
 };
});

.menu {
  width: 100%;
}

.menu-navigation ul,
.menu-navigation ul ul,
.menu-navigation ul ul ul {
  padding: 0;
  margin: 0;
}

.menu-navigation ul ul {
  display: none;
}

.menu-navigation ul li a {
  font-size: 16px;
  text-decoration: none;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  
<div id="page-wrapper" ng-app="myApp" ng-controller="myCtrl">


		<div class="menu" >
          <div class="menu-navigation">
            <ul>
              <li class="menu-item" ><a ng-click="accMenuItem($event)" href="javascript:void(0)"><h2 class="inner-tc-subheading">heading</h2></a>
                <ul class="sub-menu-navigation">
                  <li class="sub-menu-item"><a ng-click="accSubMenuItem($event)" href="javascript:void(0)"><p>subheading</p></a>
                    <ul>
                      <li class="sub-sub-menu-item"><a href="javascript:void(0)">
                        <p>content</p>
                      </a></li>
                    </ul>
                  </li>                 
                </ul>
              </li> 
             
              <li class="menu-item"><a ng-click="accMenuItem($event)" href="javascript:void(0)"><h2 class="inner-tc-subheading">heading</h2></a>
                <ul class="sub-menu-navigation">
                  <li class="sub-menu-item"><a ng-click="accSubMenuItem($event)" href="javascript:void(0)"><p>subheading</p></a>
                    <ul>
                      <li class="sub-sub-menu-item"><a href="javascript:void(0)">
                        <p>content</p>
                      </a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
            
          </div> 
        </div> 
	</div>

На данный момент все (заголовки, подзаголовки, контент) остается открытым, пока вы не нажмете на него снова. Я хочу, чтобы один заголовок / подзаголовок закрывался при открытии другого, например:

$(function(){
 $(".menu-item > a").click(function(e) {
   $(".menu-navigation ul ul").slideUp(),
   $(this).next().is(":visible") ||
   $(this).next().slideDown(),
   e.stopPropagation()
 });

 $(".sub-menu-item > a").click(function(e) {
   $(".sub-menu-navigation ul").slideUp(),
   $(this).next().is(":visible") ||
   $(this).next().slideDown(),
   e.stopPropagation()
 });
});
			

.menu {
  width: 100%;
}

.menu-navigation ul,
.menu-navigation ul ul,
.menu-navigation ul ul ul {
  padding: 0;
  margin: 0;
}

.menu-navigation ul ul {
  display: none;
}

.menu-navigation ul li a {
  font-size: 16px;
  text-decoration: none;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="page-wrapper">


		<div class="menu" >
          <div class="menu-navigation">
            <ul>
              <li class="menu-item" ><a href="javascript:void(0)"><h2 class="inner-tc-subheading">heading</h2></a>
                <ul class="sub-menu-navigation">
                  <li class="sub-menu-item"><a href="javascript:void(0)"><p>subheading</p></a>
                    <ul>
                      <li class="sub-sub-menu-item"><a href="javascript:void(0)">
                        <p>content</p>
                      </a></li>
                    </ul>
                  </li> 
                  <li class="sub-menu-item"><a href="javascript:void(0)"><p>subheading</p></a>
                    <ul>
                      <li class="sub-sub-menu-item"><a href="javascript:void(0)">
                        <p>content</p>
                      </a></li>
                    </ul>
                  </li>                 
                </ul>
              </li> 
             
              <li class="menu-item"><a href="javascript:void(0)"><h2 class="inner-tc-subheading">heading</h2></a>
                <ul class="sub-menu-navigation">
                  <li class="sub-menu-item"><a href="javascript:void(0)"><p>subheading</p></a>
                    <ul>
                      <li class="sub-sub-menu-item"><a href="javascript:void(0)">
                        <p>content</p>
                      </a></li>
                    </ul>
                  </li>
                  <li class="sub-menu-item"><a href="javascript:void(0)"><p>subheading</p></a>
                    <ul>
                      <li class="sub-sub-menu-item"><a href="javascript:void(0)">
                        <p>content</p>
                      </a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
            
          </div> 
        </div> 
	</div>

Как настроить функции jquery так, как описано выше, но все еще работать в моем угловом приложении?

Answer 1

 $scope.accMenuItem = function(e) {   
     var item = $(e.target);
     ̶i̶t̶e̶m̶.̶p̶a̶r̶e̶n̶t̶(̶)̶.̶n̶e̶x̶t̶(̶)̶.̶s̶l̶i̶d̶e̶U̶p̶(̶)̶;̶
     $(".menu-navigation ul ul").slideUp(),

     item.parent().next().is(":visible") ||
     item.parent().next().slideDown();

     e.stopPropagation();
 };

 $scope.accSubMenuItem = function(e) {
     var item = $(e.target);
     ̶i̶t̶e̶m̶.̶p̶a̶r̶e̶n̶t̶(̶)̶.̶n̶e̶x̶t̶(̶)̶.̶s̶l̶i̶d̶e̶U̶p̶(̶)̶;̶
     $(".sub-menu-navigation ul").slideUp(),

     item.parent().next().is(":visible") ||
     item.parent().next().slideDown();  

     e.stopPropagation();
 };