javascript - 切换 Accordion 展开/折叠时将按钮保持在固定位置

Question

我使用两个按钮和一些 jQuery 来切换(展开/折叠)两个带有表格的 div。当我使用按钮 1 切换第一个 div 时，按钮 2 被推到该 div 下方。我如何调整我的代码，以便按钮保持在相同的位置，只需切换下面的 div。

这是一个代码笔:

http://codepen.io/anon/pen/EjGrKX

HTML

<div id="accordion">
    <button type="button" class="btn btn-success accordion-toggle" id="btnMatch">
        Matched</button>
    <div class="accordion-content">
        <table class="table" id="match-table">
            <thead>
            <tr>
              <th>Test</th>
              <th>Test</th>
              <th>Test</th>
              <th>Test</th>

            </tr>
            </thead>
            <tbody>
                    <tr>
                        <td>
                            Test
                        </td>
                        <td>
                            Test
                        </td>
                      <td>
                            Test
                        </td>
                      <td>
                            Test
                        </td>
                    </tr>
            </tbody>
        </table>
    </div>
    <button type="button" class="btn btn-danger accordion-toggle" id="btnNoMatch">
        No Match</button>
    <div class="accordion-content">
                    <table class="table" id="no-match-table">
            <thead>
            <tr>
              <th>Test</th>
              <th>Test</th>
              <th>Test</th>
              <th>Test</th>

            </tr>
            </thead>
            <tbody>
                    <tr>
                        <td>
                            Test
                        </td>
                        <td>
                            Test
                        </td>
                      <td>
                            Test
                        </td>
                      <td>
                            Test
                        </td>
                    </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

#btnMatch {
margin-right: 10px;
}


.accordion-toggle {cursor: pointer;}
.accordion-content {display: none;}

JS

$(document).ready(function ($) {
$("#accordion").find(".accordion-toggle").click(function () {
    $(this).next().slideToggle("fast");
    $(".accordion-content").not($(this).next()).slideUp("fast");

});
});

如果我只是将按钮放在一起，那么按钮 1 将切换按钮 2，而不是我想要的内容。

Answer 1

如果使用索引将按钮映射到 Accordion-content div，则可以在 HTML 中将按钮放在一起。

JS

$("#accordion").find(".accordion-toggle").click(function () {
    var selectedAccordion = $(".accordion-content").eq($(this).index());
    selectedAccordion.slideToggle("fast");
    $(".accordion-content").not(selectedAccordion).slideUp("fast");            
});

HTML

<div id="accordion">
    <button type="button" class="btn btn-success accordion-toggle" id="btnMatch">
    Matched</button>
    <button type="button" class="btn btn-danger accordion-toggle" id="btnNoMatch">
    No Match</button>
    <div class="accordion-content">
    <table class="table" id="match-table">
        <thead>
        <tr>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>

        </tr>
        </thead>
        <tbody>
                <tr>
                    <td>
                        Test
                    </td>
                    <td>
                        Test
                    </td>
                  <td>
                        Test
                    </td>
                  <td>
                        Test
                    </td>
                </tr>
        </tbody>
    </table>
</div>

<div class="accordion-content">
                <table class="table" id="no-match-table">
        <thead>
        <tr>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>

        </tr>
        </thead>
        <tbody>
                <tr>
                    <td>
                        Test
                    </td>
                    <td>
                        Test
                    </td>
                  <td>
                        Test
                    </td>
                  <td>
                        Test
                    </td>
                </tr>
        </tbody>
    </table>
</div>
</div>