Question

我正在尝试创建一个简单的手风琴菜单 - display：none display：block。

当我点击一个手风琴菜单时，我很难一个接一个地显示和隐藏单个元素。所有手风琴隐藏菜单都会显示。有谁知道如何解决这个问题。我知道我可以使用bootstrap我想自定义构建这个...

以下是我的代码片段。

Angular

    $scope.frqToggle = function () {
    $scope.hiddenToggle = !$scope.hiddenToggle;
}

HTML

<div ng-click="frqToggle()" class="panel-heading">
                <div class="future-box-date panel-heading-date">
                    <img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
                </div>
                <div class="panel-title">
                    <span>
                        Some text goes here 
                    </span>
                </div>
            </div><!-- PANEL HEADING ENDS HERE -->
            <div id="collapseOne" ng-class="{isHidden: hiddenToggle}" class="panel-collapse">
                <p>
                    hidden menu goes here 
                </p>
            </div>
        </div><!-- PANEL ENDS HERE -->
    </div>

    <div class="frq-accordion">
        <div class="panel panel-default">
             <!-- PANEL STARTS HERE -->
            <div ng-click="frqToggle()" class="panel-heading">
                <div class="future-box-date panel-heading-date">
                    <img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
                </div>
                <div class="panel-title">
                    <span>
                        some text
                    </span>
                </div>
            </div><!-- PANEL HEADING ENDS HERE -->
            <div id="collapseTwo" ng-class="{isHidden: hiddenToggle}" class="panel-collapse">
                <p>
                SOME TEXT 
                </p>
            </div>
        </div><!-- PANEL ENDS HERE -->
    </div>

    <div class="frq-accordion">
        <div class="panel panel-default"> <!-- PANEL STARTS HERE -->
            <div ng-click="frqToggle()" class="panel-heading">
                <div class="future-box-date panel-heading-date">
                    <img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
                </div>
                <div class="panel-title">
                    <span>
                        <strong>Q:&nbsp;</strong>What are the key opportunities associated with spirit of place designs in travel-retail and duty-free environments?
                    </span>
                </div>
            </div><!-- PANEL HEADING ENDS HERE -->
            <div id="collapseThree" ng-class="{isHidden: hiddenToggle}" class="panel-collapse">
                <p>
                    <strong>A:&nbsp;</strong>We know that shoppers increasingly want it all. More brands, more stories, more service, more experiences, more convenience and more value. In this very near shopping future the experience of placelessness in airports could induce more yawns than wows.<br><br>

                    Spirit of place helps pivot passengers to shoppers. It can disrupt the traveller’s mindset by revealing the rich bounty of a local story. To be effective it must be a ‘living story’. Meaning it has continuity with the past, represents the present too and grows as the local story evolves.<br><br>

                    Airports with a sense of placelessness will miss an opportunity to seduce expectant passengers to become willing shoppers using a spirit of place.<br><br>

                    <small><strong>13/09/2016&nbsp;|&nbsp;</strong><b>Lewis Allen</b>, Director of Environments, Portland Design</small>
                </p>
            </div>
        </div><!-- PANEL ENDS HERE -->
    </div>

Answer 1

您需要为要显示/隐藏的每个元素使用单独的变量：

$scope.hiddenToggleOne = false;
$scope.hiddenToggleTwo = false;
$scope.hiddenToggleThree = false;
//one fore each ...

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

你加价：

<div ng-click="frqToggle(hiddenToggleOne)" class="panel-heading">
                <div class="future-box-date panel-heading-date">
                    <img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
                </div>
                <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 goes here 
                </p>
            </div>
        </div><!-- PANEL ENDS HERE -->
    </div>

    <div class="frq-accordion">
        <div class="panel panel-default">
             <!-- PANEL STARTS HERE -->
            <div ng-click="frqToggle(hiddenToggleTwo)" class="panel-heading">
                <div class="future-box-date panel-heading-date">
                    <img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
                </div>
                <div class="panel-title">
                    <span>
                        some text
                    </span>
                </div>
            </div><!-- PANEL HEADING ENDS HERE -->
            <div id="collapseTwo" ng-class="{isHidden: hiddenToggleTwo}" class="panel-collapse">
                <p>
                SOME TEXT 
                </p>
            </div>
        </div><!-- PANEL ENDS HERE -->
    </div>

    <div class="frq-accordion">
        <div class="panel panel-default"> <!-- PANEL STARTS HERE -->
            <div ng-click="frqToggle(hiddenToggleThree)" class="panel-heading">
                <div class="future-box-date panel-heading-date">
                    <img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
                </div>
                <div class="panel-title">
                    <span>
                        <strong>Q:&nbsp;</strong>What are the key opportunities associated with spirit of place designs in travel-retail and duty-free environments?
                    </span>
                </div>
            </div><!-- PANEL HEADING ENDS HERE -->
            <div id="collapseThree" ng-class="{isHidden: hiddenToggleThree}" class="panel-collapse">
                <p>
                    <strong>A:&nbsp;</strong>We know that shoppers increasingly want it all. More brands, more stories, more service, more experiences, more convenience and more value. In this very near shopping future the experience of placelessness in airports could induce more yawns than wows.<br><br>

                    Spirit of place helps pivot passengers to shoppers. It can disrupt the traveller’s mindset by revealing the rich bounty of a local story. To be effective it must be a ‘living story’. Meaning it has continuity with the past, represents the present too and grows as the local story evolves.<br><br>

                    Airports with a sense of placelessness will miss an opportunity to seduce expectant passengers to become willing shoppers using a spirit of place.<br><br>

                    <small><strong>13/09/2016&nbsp;|&nbsp;</strong><b>Lewis Allen</b>, Director of Environments, Portland Design</small>
                </p>
            </div>
        </div><!-- PANEL ENDS HERE -->
    </div>

Answer 2

创建一个对象以维持哪个手风琴是开放的。假设你有一个可以打开3个菜单项的手风琴。有一个像这样的对象来维护哪个菜单是打开的，哪个菜单是关闭的。

$scope.accordion_visibility = {
  menu_1: true,
  menu_2: false,
  menu_3: false
}

现在创建一个方法来切换菜单的可见性。

$scope.toggleMenuVisibility = function(menu_name){
  $scope.accordion_visibility[menu_name] = !$scope.accordion_visibility[menu_name];
}

现在在视图中，使用ng-show =＆＃34; accordion.menu_1＆＃34;，ng-show =＆＃34; accordion.menu_2＆＃34;等每个菜单项。此外，在ng-click="toggleMenuVisibility('menu_1')＆＃34;，ng-click="toggleMenuVisibility('menu_2')＆＃34;添加ng-click监听器。每个菜单上等。它应该工作。

Answer 3

按钮1

 <a (click)="iconClick(1)">
    <p style="color:gray;">
      nr 1  Create Documents from Scratch
    </p>
  </a>

按钮2

 <a (click)="iconClick(2)">
        <p style="color:gray;">
         nr 2  Create Documents from Scratch
        </p>
      </a>

关于文字1

      <div class="col-12" *ngIf="icon == 1"></div>

关于文字2

  <div class="col-12" *ngIf="icon == 2"></div>

在组件上

  icon = null;
  iconClick(number) {
    this.icon = number;
  }

角度显示和隐藏多个元素

3 个答案: