Question

凭借我之前存在的知识（例如this one），到目前为止，我已经看到可以轻松切换div容器（即隐藏和显示）。但是当我在tr中有一些数据时，我很困惑，我想在点击tr后显示和隐藏一些项目。让我们考虑一个食物菜单（我将其命名为“Rice”），并且该类别下的子菜单很少（我将它们命名为“炒饭”，“煮米饭”......）。点击“Rice”后（或者如果我有箭头或加号图标点击），应显示子菜单。同样，一旦再次点击箭头，他们应该隐藏自己。请在此website中查看如何使用箭头键切换餐厅菜单。我想做同样的事情。

我正在处理的代码：

    <div class="media-right">
        <table class="table">
            <tr>
                <td>
                    <a href="#"><h3 class="menu-title">Rice</h3></a>
</td> <!--make this tr expandable and collapsable-->
                <td>
                    <div class="menu-rate">&#36;100.00</div>
                </td>
            </tr>

             <tr>
                <td>
                    <a href="#"><h3 class="menu-title">Fried Rice</h3></a></td>
                <td>
                    <div class="menu-rate">&#36;50.00</div>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="#"><h3 class="menu-title">Boiled Rice</h3></a></td>
                <td>
                    <div class="menu-rate">&#36;25.00</div>
                </td>
            </tr>
         </table>   
    </div>

Answer 1

您可以尝试具有类似功能的“Accordion”类。

You can find it here in detail.

Answer 2

这样的东西？

parent component

componentWillReceiveProps

Answer 3

是否存在强制您使用表格的约束？由于您已经在使用jQuery，因此您可以使用jQuery UI的手风琴小部件轻松实现此类功能。

$( "#accordion" ).accordion({
  collapsible: true
});

这里是basic example。

Answer 4

如果您打开使用库，可以尝试使用wenzhichin的bootstrap-table。我发现它很灵活。

子表 - http://issues.wenzhixin.net.cn/bootstrap-table/#options/sub-table.html

折叠行 - http://issues.wenzhixin.net.cn/bootstrap-table/#methods/expandRow-collapseRow.html

Answer 5

结帐由谷歌制作的材料设计的可折叠元素，非常有用且易于使用：

http://materializecss.com/collapsible.html

如何展开和折叠（即切换）表格行（tr）？

6 个答案: