一次切換一個Div /單擊打開Div，它將關閉

Question

我正在嘗試切換div，以便一次只能打開一個div。 我已經查看了提供的其他解決方案，但是提供的解決方案是，如果我再次單擊打開的div，它不會關閉。 我正在尋找當前打開的div，當單擊時再次關閉。 給定的任何幫助，我們將不勝感激。 提前致謝。

JSFIDDLE： http : //jsfiddle.net/ZmDs2/78/

的HTML

    <table class="table">
        <thead>
            <tr>
                <th>Title</th>
                <th>From</th>
                <th>Utensil</th>
            </tr>
        </thead>

        <tbody>
            <tr class="list">
                <td class="title">Cupcakes</td>
                <td class="from">Molly's Cupcakes</td>
                <td>Chopsticks</td>
            </tr>

            <tr class="description">
                <td>hello </td>
            </tr>


            <tr class="list">
                <td class="title">Pizza</td>
                <td>Roberta's</td>
                <td>Knife</td>
            </tr>

            <tr class="description">
                <td>bye </td>
            </tr>


            <tr class="list">
                <td>Pasta</td>
                <td>Basta Pasta</td>
                <td>Spoon</td>
            </tr>

            <tr class="list">
                <td>Chicken & Waffles</td>
                <td>cell is row 3, column 1</td>
                <td>Spoon</td>
            </tr>

        </tbody>
    </table>

的CSS

.description{
    display:none;
}

JS：

    $('.title').on('click', function() {
      var $this = $(this),
          $next = $this.next();

      // Check if another profile is open and close it
      var $last = $('.description:visible', $this.parents('table'));

      if ($last.length) {
        $last.slideUp('fast');
      }

      // Show the new profile content only if we are opening a new profile
      if ($last.parents('.list').index() !== $this.parent().index()) {
        $next.slideDown('fast');
      }
    });

Answer 1

除非必要，否則請謹慎行事，以免“重新發明輪子”。 引導程序庫具有一個Collapse元素，該元素可以滿足您的需求。

檢查一下 ，看它是否適合帳單。

Answer 2

從Twitter Bootstrap庫創建了一個折疊元素。

<table class="table table-condensed" style="border-collapse:collapse;">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>From</th>
                            <th>Utensil</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr class="list">
                            <td data-toggle="collapse" data-target="#cupcakes" class="accordion-toggle">Cupcakes</td>
                            <td class="from">Molly's Cupcakes</td>
                            <td>Chopsticks</td>
                        </tr>

                        <tr>
                            <td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="cupcakes">hello</div></td>
                        </tr>


                        <tr class="list">
                            <td data-toggle="collapse" data-target="#pizza" class="accordion-toggle">Pizza</td>
                            <td class="from">Roberta's</td>
                            <td>Knife</td>
                        </tr>

                        <tr>
                            <td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="pizza">bye</div></td>
                        </tr>


                        <tr class="list">
                            <td data-toggle="collapse" data-target="#pasta" class="accordion-toggle">Pasta</td>
                            <td>Basta Pasta</td>
                            <td>Spoon</td>
                        </tr>

                        <tr>
                            <td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="pasta">hi</div></tr>
                        </tr>

</tbody>
</table>