如何使jquery函数与angularJS一起使用? [英] How to get jquery function to work with angularJS?

问题描述

我有一个手风琴菜单，该菜单在我的angularJS应用程序中使用jQuery.目前无法正常运行.我已经在CSS中为.menu-navigation ul ul注释了display: none;，以表明它具有某些功能，只是排序错误.我也不确定将ng-click放置在html中的位置.

I have an accordion menu which uses jQuery in my angularJS application. It's not currently working as it should do. I have commented out display: none; for .menu-navigation ul ul in the css to show that it has some functionality, just the wrong sort. I'm also unsure where to place ng-click in the html.

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函数是:

Originally, the jQuery functions were:

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

推荐答案

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

Try modifying js click events as:

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

这篇关于如何使jquery函数与angularJS一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！