根据 ID 打开 JQuery 个手风琴

Question

我试图让我的代码根据一个事件关闭所有手风琴，然后根据它的 ID 打开一个特定的手风琴。我的手风琴是动态创建的，并且可以由很多人创建。我的手风琴看起来像：

<div id="accordion" class="emitters head wrapper ui-accordion ui-widget ui-helper-reset ui-sortable" role="tablist">
  <div id="Test1">
    <h3 class="accordion-header3 accordion-content-active ui-accordion-header ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="true" aria-expanded="true"
    tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span><a class="accordion-expand-all" href="#"></a>Name: Test2</h3> 
    <table id="table_test1" class="table-text table-collapse ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="width: 100%; padding: 0px; margin: 0px; font-size: 13px; color: blue; display: table; height: 17px; background-color: rgba(189, 197, 205, 0.45098);"
    id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false">
      <tbody>
        <tr>
          <th class="table-text" style="width: 71px">ATF</th>
          <th class="table-text" style="width: 73px">1.1</th>
          <th class="table-text" style="width: 107px">2.2</th>
          <th class="table-text" style="width: 223px">7.53</th>
          <th class="table-text" style="width: 197px">16:37:31</th>
          <th class="table-text" style="width: 80px">37.8715</th>
          <th class="table-text" style="width: 78px">60.8957</th>
          <th class="table-text" style="width: 202px">21</th>
          <th class="table-text" style="width: 180px">ACTIVE</th>
          <th class="table-text" style="width: 145px">35.34</th>
          <th class="table-text" style="width: 192px">0</th>
          <th class="table-text" style="width: 125px">27793</th>
          <th class="table-text" style="width: 136px">0.1</th>
          <th class="table-text" style="width: 90px">35</th>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="Test2">
    <h3 class="accordion-header3 accordion-content-active ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-id-3" aria-controls="ui-id-4" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><a class="accordion-expand-all" href="#"></a>Name: Test2</h3> 
    <table id="table_test2" class="table-text table-collapse ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="width: 100%; padding: 0px; margin: 0px; font-size: 13px; color: darkgreen; display: none; height: 17px; background-color: rgba(189, 197, 205, 0.45098);"
    id="ui-id-4" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true">
      <tbody>
        <tr>
          <th class="table-text" style="width: 71px">11</th>
          <th class="table-text" style="width: 73px">11</th>
          <th class="table-text" style="width: 107px">11</th>
          <th class="table-text" style="width: 223px">2.78</th>
          <th class="table-text" style="width: 197px">16:37:31</th>
          <th class="table-text" style="width: 80px">-108.6117</th>
          <th class="table-text" style="width: 78px">46.6017</th>
          <th class="table-text" style="width: 202px">CDF</th>
          <th class="table-text" style="width: 180px">ACTIVE</th>
          <th class="table-text" style="width: 145px">11</th>
          <th class="table-text" style="width: 192px">0</th>
          <th class="table-text" style="width: 125px">11</th>
          <th class="table-text" style="width: 136px">0.1</th>
          <th class="table-text" style="width: 90px">11</th>
        </tr>
      </tbody>
    </table>
  </div>
</div>

close all 部分工作正常：

var contentAreas = $('#accordion .table-collapse ').hide();

但是基于一个事件，我可以获得 div 手风琴 ID 或手风琴 ID 内的 table 只需要打开特定的手风琴。什么 javascript 代码会给我特定手风琴的参考，所以我可以使用：

.show()

为了打开它？

Answer 1

你似乎有很多手风琴面板。要以正确的方式关闭此类 jQuery UI 手风琴，您应该设置 collapsible option. For more info see 。与你拥有的相比，我建议使用带有多个面板的单个手风琴。

就是说，要打开特定的手风琴，您只需使用 active 选项将它的唯一面板（在索引 0 处）设置为活动面板，例如：

$("#Test2").accordion( "option", "active", 0 );

要关闭所有手风琴，您需要向所有手风琴添加一个公共选择器 class 并执行：

$(".accordion").accordion( "option", "active", false );

或使用您现有的标记，例如：

$("#accordion > div").accordion( "option", "active", false );

Answer 2

设法通过以下方式解决：

 var index = $('#accordion').find('table');
    for(var j=0; j<index.length; j++){
        if(index[j].id == selected){
            $("#accordion").accordion("option", "active", j);
        }
    }

selected 是我从活动中获得的 table ID。

根据 ID 打开 JQuery 个手风琴

Open JQuery accordion based on its ID

javascript

jquery

jquery-ui

jquery-ui-accordion