切换手风琴展开/折叠时，将按钮保持在固定位置

Question

我正在使用两个按钮和一些jQuery来切换（扩展/折叠）两个div，其中包含表格。 当我使用按钮1切换第一个div时，按钮2被推到div下方。 如何调整代码，使按钮保持在同一位置，只需切换下面的div。

这是一个codepen：

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

我做了一些CSS更改，以将按钮保持在原处。 看起来有效：

button {
  position: absolute;
  top: 0;
}

#btnNoMatch {
    left: 100px;
}

.accordion-content {
  margin-top: 40px;
}

Answer 2

这是一个简单的例子。 http://jsfiddle.net/et8mLa0c/

HTML

<div id="outer_wrapper">
    <div id="buttons_container">
        <a href="javascript:" data-table="table_one" class="toggle_button">Open Table One</a>
        &nbsp;|&nbsp;
        <a href="javascript:" data-table="table_two" class="toggle_button">Open Table Two</a>
    </div>
    <table id="table_one">
        <tr>
            <td>Table One</td>
        </tr>
        <tr>
            <td>Table One</td>
        </tr>
        <tr>
            <td>Table One</td>
        </tr>
    </table>

    <table id="table_two">
        <tr>
            <td>Table Two</td>
        </tr>
        <tr>
            <td>Table Two</td>
        </tr>
        <tr>
            <td>Table Two</td>
        </tr>
    </table>
</div>

CSS

#buttons_container{
    height:50px;
    position:relative;
}
a.toggle_button{
    text-decoration:none;
}
table{
    left:10px;
    top:50px;
    width:350px;
    display:none;
    position:absolute;
    border:solid 1px #ddd;
    border-collapse:collapse;
}
table td{
    border:solid 1px #ddd;
}

使用Javascript

$(document).ready(function(){
   var $tables = $('table'),
       $btns = $('.toggle_button');

    $btns.click(toggleTable);

    function toggleTable(event){
        event.preventDefault();
        var $target = $(event.target);
        var tableId = $target.data("table");

        $tables.hide();

        $('#' + tableId).show();
    }
});

Answer 3

如果使用索引将按钮映射到手风琴内容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>