Question

我在将<span>隐藏在表格行中时遇到问题。我想要一个引导徽章调用“ExpandDetail”来单击一个函数然后隐藏自己，然后在同一个<span>中显示另一个名为“CollapseDetail”的<tr>。请注意，<span>都使用bootstrap“badge”类。调用元素可以隐藏自己很好，但是我无法在<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（）

控制

在HTML表格行

1 个答案: