如何将加号减号图标添加到手风琴

Question

我在 AngularJS 应用程序中有一个手风琴，我正在使用 jQuery 展开和折叠它：一切正常，但我需要为 plus/minus 切换图标展开和折叠。

我已经写了 jQuery 部分，但问题是图标在展开时会发生变化，但在折叠时不会发生变化。

代码如下：

angular.module('app', ['ui.bootstrap', 'ngSanitize', 'angular.filter']);
angular.module('app').controller('AccordionDemoCtrl', function($scope) {

  $scope.oneAtATime = true;

  $scope.groups = [{
      title: 'title 1',

      isOpen: true,
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a'
      ]
    },
    {
      title: 'title 2',

      list: ['item1b',
        '<b>item2b </b> blah ',
        'item3b'
      ]
    },
    {
      title: 'title 3',

    },
    {
      title: 'title 4',

    },
    {
      title: 'title 5',

    }
  ];
  $(document).ready(function() {
    $(".parents").click(function() {
      $(this).find('i').removeClass('glyphicon-minus');
      $(this).find('i').addClass('glyphicon-plus');
      $(this).next().slideToggle('fast');
      $(".childs").not($(this).next()).slideUp('fast');
    });
  });
});

.childs {
  display: none;
}

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>

<body ng-app="app">
  <h1>Dynamic accordion: nested lists with html markup</h1>
  <div ng-controller="AccordionDemoCtrl">
    <div>
      <div ng-repeat="group in groups">
        <div class="parents"><i class="glyphicon-minus"></i> {{ group.title }}
        </div>
        {{ group.content }}
        <ul class="childs">
          <li ng-repeat="item in group.list">
            <span ng-bind-html="item"></span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js'></script>
<script src="js/index.js"></script>

Answer 1

需要分别检查哪个 class 和 add/remove 处于活动状态。

 $(document).ready(function() {
    $(".parents").click(function() {

    if($(this).find("i").attr('class')=='glyphicon-plus'){
      $(this).find('i').addClass('glyphicon-minus');
      $(this).find('i').removeClass('glyphicon-plus');
     }
     else{
      $(this).find('i').removeClass('glyphicon-minus');
      $(this).find('i').addClass('glyphicon-plus');
      }
      $(this).next().slideToggle('fast');
      $(".childs").not($(this).next()).slideUp('fast');
    });
  });

<body ng-app="app">
  <h1>Dynamic accordion: nested lists with html markup</h1>
  <div ng-controller="AccordionDemoCtrl">
    <div>
      <div ng-repeat="group in groups">
        <div class="parents"><i class="glyphicon-plus"></i> {{ group.title }}
        </div>
        {{ group.content }}
        <ul class="childs">
          <li ng-repeat="item in group.list">
            <span ng-bind-html="item"></span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>

如何将加号减号图标添加到手风琴

How to add plus minus icon to accordion

jquery

accordion

angularjs