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

【问题标题】：Keep buttons in fixed position when toggling accordion expand/collapse切换手风琴展开/折叠时将按钮保持在固定位置
【发布时间】：2015-08-04 03:25:44
【问题描述】：

我正在使用两个按钮和一些 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;}

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

});
});

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

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

如果您使用索引将按钮映射到手风琴内容 div，您可以在 HTML 中将按钮放在一起。

$("#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>

【讨论】：

【解决方案2】：

我对 CSS 进行了一些更改，以使按钮保持在原来的位置。看起来有效：

button {
  position: absolute;
  top: 0;
}

#btnNoMatch {
    left: 100px;
}

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

【讨论】：

【解决方案3】：

这是一个简单的例子。 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();
    }
});

【讨论】：