【问题标题】:Collapse/Expand Accordion on Button Click单击按钮时折叠/展开手风琴
【发布时间】:2019-08-26 13:31:57
【问题描述】:

我之前问过这个问题,但我的问题并不清楚 我想通过单击一个按钮来折叠手风琴的一部分,该按钮禁用当前部分并展开手风琴的下一部分 https://jsfiddle.net/2L1x9v07/

Collapse current accordion section disabling it and expand next 

小提琴中手风琴的前两个部分有一个继续按钮 点击继续后,当前部分折叠,下一部分展开 我怎样才能做到这一点?

【问题讨论】:

  • 点击事件增量accordion
  • 能否请您描述得更详细一些,将不胜感激
  • 它是根据accordion...的值工作的,所以你需要更新accordion的值......。加一将使其按预期工作

标签: javascript button accordion collapse expand


【解决方案1】:

您可以使用与<a> 标签相同的方法

<div ng-init="accordion=1">
    <h3 class="accordion" ng-class="{active:accordion==1}">
        <a href ng-click="accordion = 1">Section 1</a>
    </h3>
    <p class="accordion-content" ng-show="accordion==1">Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
  <br/>
 <button type="submit" style="max-width:200px" ng-click="accordion = 2" class="btn btn-primary btn-block pull-right">Continue</button></p>

    <h3 class="accordion" ng-class="{active:accordion==2}">
        <a href ng-click="accordion = 2">Section 2</a>
    </h3>
    <p class="accordion-content" ng-show="accordion==2">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
  <br/>
 <button type="submit" style="max-width:200px" ng-click="accordion = 3" class="btn btn-primary btn-block pull-right">Continue</button>

  </p>

    <h3 class="accordion" ng-class="{active:accordion==3}">
        <a href ng-click="accordion = 3">Section 3</a>
    </h3>
    <p class="accordion-content" ng-show="accordion==3">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form</p>
</div>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-09-23
    • 2012-03-04
    • 1970-01-01
    • 2021-11-10
    • 2016-07-02
    相关资源
    最近更新 更多