Аккордеон в JavaScript не вызывает функцию - PullRequest
Новая
       6

Аккордеон в JavaScript не вызывает функцию

0 голосов
/ 23 октября 2018

Я работаю над Accordion в 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 (), а происходит переход на домашнюю страницу

1 Ответ

0 голосов
/ 23 октября 2018

фрагмент кода для проверки не нужно 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>
...