Javascript 在HTML表行中隐藏多个跨距

在表行中隐藏

时遇到问题。我想要一个引导标记调用“ExpandDetail”来单击一个函数，然后隐藏它自己，然后在同一个

中显示另一个名为“Collapsedeail”的

。请注意，这两个

都使用引导“badge”类。调用元素可以很好地隐藏自己，但是我在

中找不到相关的span来隐藏它。下面是一个演示：

<tr>
    <td>12345
       <span id="ExpandDetail" style="cursor: pointer;" class="badge" onclick="return openDetail(this, ‘1’);">ABC 123</span> 
        <span id="CollapseDetail" style="cursor: pointer; visibility: hidden" class="badge" onclick="return closeDetail(this, ‘1’);">ABC 123 </span>
     </td>
     <td>$100.00</td>
     <td>$200.00</td>
</tr>

function openDetail(t, ID) {
    // Hides the calling <span> ExpandDetail just fine
    $(t).hide();
    // Need to show the <span> named  CollapseDetail
}

function closeDetail(t, ID){
    // Hides the calling <span> closeDetail just fine
    $(t).hide();

    // Need to show the <span> named ExpandDetail

12345
ABC 123
ABC 123
$100.00
$200.00
函数openDetail（t，ID）{
//隐藏调用详细信息很好
$（t.hide（）；
//需要显示命名的collapsedeail
}
功能关闭详细信息（t，ID）{
//隐藏调用的细节很好
$（t.hide（）；
//需要显示指定的ExpandDetail

---

}不需要单独的功能。只需切换兄弟跨度

function toggleDetail(t, ID){

   $(t).hide().siblings('.badge').show();

   // or use `toggle()` on both

   $(t).parent().find('.badge').toggle();
}

---

请注意，css

可见性

不受hide（）或show（）的控制

$（t）.hide（）同级（'.badge'）.show（）；将隐藏“ExpandDetail”detail.badge类，但不会显示默认情况下不可见的“Collapsedeail”跨度类。有什么想法吗？请参阅最后一个关于

可见性的注释。尝试
显示：无
而不是
可见性：隐藏