引导手风琴折叠按钮

Bootstrap accordion collapse button

本文关键字：按钮 折叠 手风琴      更新时间：2023-09-26

我正在尝试创建一个带有内部按钮的引导手风琴，该按钮将折叠当前手风琴段并打开下一个，这由于某种原因不起作用。

HTML: 

<div ng-controller="AccordionDemoCtrl">  
    <accordion>
       <accordion-group id="firstpanel" heading="Static Header 1"  is-open="status.isFirstOpen">
          <span id="span1">This content is straight in the template.</span><br> 
          <button id="nextpanel">Next</button>
       </accordion-group>
       <accordion-group heading="Static Header 2">
          <span id="span1">This content is straight in the template.</span>
       </accordion-group>
    </accordion>
</div>
JAVASCRIPT: 

angular.module('plunker', ['ui.bootstrap']);
function AccordionDemoCtrl($scope) {
  $scope.status = {
    isFirstOpen: true,
    isFirstDisabled: false
  };
  $("#nextpanel").on("click", function() {   
   $(firstpanel).click();
  });
}

我在这里做了一个plunker的例子:

不能在控制器构造函数中使用jquery选择器。在那个阶段，像#nextpanel这样的DOM元素甚至不在DOM树中，所以$("#nextpanel")本质上是一个空数组。

我建议你完全忘记jquery。使用jquery的唯一情况是，当你需要使用一个你已经熟悉的插件(比如日历)时。在任何情况下，jquery代码(带有$()的代码)应该严格地驻留在包装插件的指令的link函数中。

MVC的方式，是有一个"模型"(JS对象)驱动UI。Angular会用它的魔力让这两个脚本保持同步。

存储打开的手风琴的模型可以是一个布尔值数组:

$scope.status = [true, false, false, false];

打开下一个手风琴只是找到打开的那个，并将下一个设置为true(或绕到第一个)。

$scope.next = function() {
    var indx = $scope.status.indexOf(true);
    $scope.status[(++indx) % $scope.status.length] = true;
};

accordion组件将确保在任何给定时间只有一个是true。

现在，你的模板类似于: 
<accordion>
    <accordion-group heading="Static Header 1"  is-open="status[0]">
      <span>This content is straight in the template.</span><br>
      <button ng-click="next()">Next</button>
    </accordion-group>
    <accordion-group heading="Static Header 2"  is-open="status[1]">
      <span>This content is straight in the template.</span><br>
      <button ng-click="next()">Next</button>
    </accordion-group>
    <accordion-group heading="Static Header 3"  is-open="status[2]">
      <span>This content is straight in the template.</span><br>
      <button ng-click="next()">Next</button>
    </accordion-group>
    <accordion-group heading="Static Header 4" is-open="status[3]">
      <span>This content is straight in the template.</span><br>
      <button ng-click="next()">Start over</button>
    </accordion-group>
</accordion>

这是固定活塞

相关文章：