jquery - 如何让 jquery 函数与 angularJS 一起工作？

Question

我有一个手风琴菜单，它在我的 angularJS 应用程序中使用 jQuery。它目前没有按应有的方式工作。我已经在 css 中注释掉了display: none;，.menu-navigation ul ul以表明它有一些功能，只是排序错误。我也不确定在ng-clickhtml 中的位置。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
			
 $scope.accMenuItem = function(e) {
  angular.element(".menu-navigation ul ul").slideUp(),
  angular.element(this).next().is(":visible") ||
  angular.element(this).next().slideDown(),
  e.stopPropagation()
 };

 $scope.accSubMenuItem = function(e) {
  angular.element(".sub-menu-navigation ul").slideUp(),
  angular.element(this).next().is(":visible") ||
  angular.element(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>
	<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>

最初，jQuery 函数是：

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

标签： jqueryangularjs

Answer 1

尝试将js点击事件修改为：

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