切换手风琴班使用角度js

Question

我已经创建了一个自定义的Angular手风琴菜单。我有基本操作菜单打开和关闭。当我点击切换菜单时，我遇到了一个问题，我希望在切换菜单上添加的类可以被删除。 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; 
}; 

，或者你可以尝试不同的方法，因为这样，

在控制器上添加以下代码

​​

，并通过粘贴下面取代你的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>