一次切换一个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>