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

根据我先前的知识（例如），到目前为止，我已经看到可以轻松切换

div

容器（即隐藏和显示）。然而，当我在

tr

中有一些数据时，我非常困惑，我想在单击

tr

后显示和隐藏一些项目。让我们考虑一个食物菜单（我称之为“Rice”），在这个类别下很少有子菜单（我把它们命名为“Fried rice”，“煮饭”……）。一旦点击“Rice”（或者如果我有一个箭头或加号图标可以点击），子菜单就会显示出来。同样，一旦再次单击箭头，它们应该隐藏自己。 请看在这本书中，他们是如何用箭头键切换餐厅菜单的。我想做完全相同的事情

我正在编写的代码：

    <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>

$100
$50
$25

$（函数（）{
$（'.menu rate'）。单击（函数（）{
$（this）.closest（'.container'）.toggleClass（'collapsed'）；
});
});

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

像这样的事

函数Rice（）{
if（document.getElementById（“Rice”）.style.display==“无”）{
document.getElementById（“Rice”）.style.display=“block”；
}否则{
document.getElementById（“Rice”）.style.display=“无”；
}
}
函数boiledRice（）{
if（document.getElementById（“boiledRice”）.style.display==“无”）{
document.getElementById（“boiledRice”）.style.display=“block”；
}否则{
document.getElementById（“boiledRice”）.style.display=“无”；
}
}
函数friedRice（）{
if（document.getElementById（“friedRice”）.style.display==“无”）{
document.getElementById（“friedRice”）.style.display=“block”；
}否则{
document.getElementById（“friedRice”）.style.display=“无”；
}
}

大米
1
2
3

$100
炒饭
$50
煮饭
$25

是否存在强迫您使用表的约束？因为您已经在使用jQuery，所以可以使用jQueryUI的accordion小部件轻松实现这种功能

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

---

这里有一个。

如果您愿意为此使用库，您可以尝试使用wenzhichin提供的引导表。我觉得它很灵活

子表-

---

折叠行-

检查google制作的材质设计上的可折叠元素，非常有用且易于使用：

---

通常，手风琴是使用嵌套结构完成的，就像您链接的站点一样，因为每个“主”链接都可能有许多子链接。在一张像你这样的平面桌子上，没有简单的方法可以将第一个TR链接到下两个TR，但是（比如）第三个和第四个TR就不行了。你有没有可能尝试一个预建的手风琴库？使用Bootstrap的折叠

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