Javascript 如何解决开放与创新；关闭div引导程序问题？

我用手柄呈现一个项目列表，并使用引导为每个项目创建一个切换

div

。车把工作良好，也切换，但不是关闭的引导div功能

（我已经尝试使用bootstrap accordion，但它不起作用，所以我想使用

jQuery

解决这个问题）

每次我打开一个新的div，它都应该关闭另一个div（如果有一个已经打开）；这不起作用，我一次可以打开多个面板

<section id="list-wrap">

  <script id="list-items" type="text/x-handlebars-template">
    {{#each cards}}

      <div class="panel">
        <div class="panel-heading grad">
          <h4>
            <span class="title-style">{{name}}</span>
            <a data-toggle="collapse" href="#{{this.code}}">
              <i class="chevron_toggleable indicator glyphicon glyphicon-chevron-right  pull-left"></i>
              </a>
            <p class="apr title-style"> {{apr}} % APR </p>
          </h4>
        </div>
        <div id="{{this.code}}" class="changeClass panel-collapse collapse">
          <div class="panel-body">
            <div>
              <div class="img-div">
                <img src="assets/{{code}}.png">
              </div>
              <div class="info-div"><p class="info-paragraf">{{information}}</p>
              </div>
              <div class="cashback-div">
                <p class="cashback-paragraf-1">Cashback</p>
                <p class="cashback-paragraf-2">{{cashback}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

    {{/each}}
  </script>

</section>

---

尝试使用jQuery UIs accordion作为选项

您只需将项目放入一个accordio标记中，将每个项目包装在一个div中作为accordio div的子项，然后在accordio div上调用accordio方法

---

我会使用像这样的jquery手风琴函数

 $('#accordion').accordion({
        collapsible:true,

    beforeActivate: function(event, ui) {
         // The accordion believes a panel is being opened
        if (ui.newHeader[0]) {
            var currHeader  = ui.newHeader;
            var currContent = currHeader.next('.ui-accordion-content');
         // The accordion believes a panel is being closed
        } else {
            var currHeader  = ui.oldHeader;
            var currContent = currHeader.next('.ui-accordion-content');
        }
         // Since we've changed the default behavior, this detects the actual status
        var isPanelSelected = currHeader.attr('aria-selected') == 'true';

         // Toggle the panel's header
        currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));

        // Toggle the panel's icon
        currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);

         // Toggle the panel's content
        currContent.toggleClass('accordion-content-active',!isPanelSelected)    
        if (isPanelSelected) { currContent.slideUp(); }  else { currContent.slideDown(); }

        return false; // Cancels the default action
    }
});

---

解决了的。这是一个异步问题。js函数正在工作。

 $('#accordion').accordion({
        collapsible:true,

    beforeActivate: function(event, ui) {
         // The accordion believes a panel is being opened
        if (ui.newHeader[0]) {
            var currHeader  = ui.newHeader;
            var currContent = currHeader.next('.ui-accordion-content');
         // The accordion believes a panel is being closed
        } else {
            var currHeader  = ui.oldHeader;
            var currContent = currHeader.next('.ui-accordion-content');
        }
         // Since we've changed the default behavior, this detects the actual status
        var isPanelSelected = currHeader.attr('aria-selected') == 'true';

         // Toggle the panel's header
        currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));

        // Toggle the panel's icon
        currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);

         // Toggle the panel's content
        currContent.toggleClass('accordion-content-active',!isPanelSelected)    
        if (isPanelSelected) { currContent.slideUp(); }  else { currContent.slideDown(); }

        return false; // Cancels the default action
    }
});