如何在AngularJS中为手风琴菜单调整此JQuery函数？

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();
 };