在 HTML 表格行中隐藏多个跨度

Question

我无法在表格行中隐藏 <span>。我想要一个引导程序徽章调用“ExpandDetail”来单击一个函数，然后隐藏自身，然后在同一个<tr> 中显示另一个名为“CollapseDetail”的<span>。请注意，<span> 都使用引导程序“徽章”类。调用元素可以很好地隐藏自己，但我在<tr> 中找不到关联的跨度来隐藏它。这是一个演示：

<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

}

Answer 1

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

function toggleDetail(t, ID){

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

   // or use `toggle()` on both

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

注意 css visibility 不受 hide() 或 show() 控制