切換手風琴班使用角度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>