Переключая классы аккордеона, используйте угловые js

Question

Я создал пользовательское меню углового аккордеона. У меня есть основы, открывающие и закрывающие меню. Одна проблема, которую я получаю, когда я нажимаю на меню переключения два, я хочу, чтобы добавленный класс переключился в одно меню, которое нужно удалить. Here's an example

Ниже приведен фрагмент кода.

<div class="frq-accordion"> 
    <div class="panel panel-default"> 
    <!-- PANEL STARTS HERE--> 
    <div ng-click="frqToggle('hiddenToggleOne')" class="panel-heading"> 
     <div class="panel-title"> 
     <span>Some text goes here!</span> 
     </div> 
    </div> 
    <!-- PANEL HEADING ENDS HERE --> 
    <div id="collapseOne" ng-class="{isHidden: hiddenToggleOne}" class="panel-collapse"> 
     <p>Hidden menu is open</p> 
    </div> 
    </div> 
    <!-- PANEL ENDS HERE --> 
</div> 
<!-- FRQ ACCORDION CONTAINER ENDS HERE --> 

<div class="frq-accordion"> 
    <div class="panel panel-default"> 
    <!-- PANEL STARTS HERE--> 
    <div ng-click="frqToggle('hiddenToggleTwo')" class="panel-heading"> 
     <div class="panel-title"> 
     <span>Some text goes here!</span> 
     </div> 
    </div> 
    <!-- PANEL HEADING ENDS HERE --> 
    <div id="collapseTwo" ng-class="{isHidden: hiddenToggleTwo}" class="panel-collapse"> 
     <p>Hidden menu is open</p> 
    </div> 
    </div> 
    <!-- PANEL ENDS HERE --> 
</div> 
<!-- FRQ ACCORDION CONTAINER ENDS HERE --> 

<div class="frq-accordion"> 
    <div class="panel panel-default"> 
    <!-- PANEL STARTS HERE--> 
    <div ng-click="frqToggle('hiddenToggleThree')" class="panel-heading"> 
     <div class="panel-title"> 
     <span>Some text goes here!</span> 
     </div> 
    </div> 
    <!-- PANEL HEADING ENDS HERE --> 
    <div id="collapseThree" ng-class="{isHidden: hiddenToggleThree}" class="panel-collapse"> 
     <p>Hidden menu is open</p> 
    </div> 
    </div> 
    <!-- PANEL ENDS HERE --> 
</div> 

ANGULAR

$scope.hiddenToggleOne = true; 
$scope.hiddenToggleTwo = false; 
$scope.hiddenToggleThree = false; 
$scope.hiddenToggleFour = false; 
$scope.hiddenToggleFive = false; 

$scope.frqToggle = function(toggleElem) { 
    $scope[toggleElem] = !$scope[toggleElem]; 
} 

Answer 1

Сброс каждый логический к 'ложным', прежде чем переключиться.

$scope.frqToggle = function(toggleElem) { 
    resetAllToFalse(); 
    $scope[toggleElem] = !$scope[toggleElem]; 
}; 

var resetAllToFalse = function(){ 
    $scope.hiddenToggleOne = false; 
    $scope.hiddenToggleTwo = false; 
    $scope.hiddenToggleThree = false; 
    $scope.hiddenToggleFour = false; 
    $scope.hiddenToggleFive = false; 
}; 

или, вы можете попробовать другой подход как таковой,

В контроллере добавьте следующий код

$scope.activeTab = 1; 

$scope.changeActiveTabTo = function(tabIndex){ 
    $scope.activeTab = tabIndex; 
} 

и заменить HTML на ниже вставили

<div class="frq-accordion"> <div class="panel panel-default"> 
    <!-- PANEL STARTS HERE--> 
    <div ng-click="changeActiveTabTo(1)” class="panel-heading"> 
     <div class="panel-title"> 
     <span>Some text goes here!</span> 
     </div> 
    </div> 
    <!-- PANEL HEADING ENDS HERE --> 
    <div id="collapseOne" ng-show=“activeTab == 1” class="panel-collapse"> 
     <p>Hidden menu is open</p> 
    </div> </div> <!-- PANEL ENDS HERE --> </div> <!-- FRQ ACCORDION CONTAINER ENDS HERE --> 

<div class="frq-accordion"> <div class="panel panel-default"> 
    <!-- PANEL STARTS HERE--> 
    <div ng-click="changeActiveTabTo(2)” class="panel-heading"> 
     <div class="panel-title"> 
     <span>Some text goes here!</span> 
     </div> 
    </div> 
    <!-- PANEL HEADING ENDS HERE --> 
    <div id="collapseTwo" ng-show=“activeTab == 2” class="panel-collapse"> 
     <p>Hidden menu is open</p> 
    </div> </div> <!-- PANEL ENDS HERE --> </div> <!-- FRQ ACCORDION CONTAINER ENDS HERE --> 

<div class="frq-accordion"> <div class="panel panel-default"> 
    <!-- PANEL STARTS HERE--> 
    <div ng-click="changeActiveTabTo(3)” class="panel-heading"> 
     <div class="panel-title"> 
     <span>Some text goes here!</span> 
     </div> 
    </div> 
    <!-- PANEL HEADING ENDS HERE --> 
    <div id="collapseThree" ng-show=“activeTab == 3” class="panel-collapse"> 
     <p>Hidden menu is open</p> 
    </div> </div> <!-- PANEL ENDS HERE --> </div>