Question

我正在用Java脚本开发手风琴，但无法调用函数，即未打开该按钮的内容。

HTML

<div class="accwrapper">
<button class="accordion" type="button" onclick="open()">Section1</button>
<div class="panel">
  <p>
    Hithesh
  </p>
</div>
<button class="accordion" type="button">Section2</button>
<div class="panel">
  <p>
    fsdf
  </p>
</div>
<button class="accordion" type="button">Section3</button>
<div class="panel">
  <p>
    ffhhhh
  </p>
</div>

JS

$scope.open = function() {
  var acc = document.getElementsByClassName("accordion");
  var i;
  for (i = 0; i < acc.length; i++) {
    acc[i];
    this.classList.toggle("active");

    var panel = this.nextElementSibling;

    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
}

为什么不调用open（）函数，并导航到主页

Answer 1

代码段以检查是否需要使用click功能。使用ng-repeat指令

实现

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

   $scope.accordion = {
     current: null
   };
 
   $scope.items = [
       { id: 1, content: 'Hithesh'},
       { id: 2, content: 'fsdf'},
       { id: 3, content: 'ffhhhh'},
     ];
   
});

<html ng-app="plunker">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">

    <div class="accwrapper">
      <div ng-repeat="item in items">
        <button class="accordion" type="button" ng-click="accordion.current = item.id">Section1</button>
        <div class="panel" ng-show="accordion.current == item.id">
          <p>
            {{item.content}}
          </p>
        </div>
      </div>
    </div>
    
</body>
</html>

JavaScript中的手风琴未调用函数

1 个答案: