Question

我创建了一个自定义的Angular手风琴菜单。我有打开和关闭菜单的基础知识。当我点击切换菜单2时我遇到的一个问题我希望在切换菜单1上添加的类被删除。 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

在切换之前将每个布尔值重置为“false”。

$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>

切换手风琴类使用角度js

1 个答案: