javascript - Bootstrap 表如何隐藏，当使用 javascript 切换可见时它无法正确显示

Question

我有一个 Bootstrap 表。我最初使用 css 隐藏其中一个表行。我有一个复选框，如果它被选中，我想显示隐藏的表格行，否则它不应该显示该行。我让它工作，但是当选中复选框时，现在可见行的格式(宽度)不正常(未对齐)。我尝试使用这个隐藏行的 css(宽度、显示内联表...)，但我无法让它工作。

CSS:

 #hiddenRow {
       display: none;
    }
    .orderTotal {
       padding: 10px;
       background-color: #fdfbe4;
       width: 95%;
       margin: 0 auto;  
    }
    .orderTotal h4 {
       font-weight: bold;   
    }
    .totalOrder {
       color: #ee7a23;
       font-weight: bold;
       font-size: 18px; 
    }
    .totalAmount {
       font-weight: bold;
       font-size: 18px; 
    }

表格 html:

<div class="orderTotal">
   <h4>Order Total:</h4

   <table id="tableOrderTotal" class="table tableTotal">
    <tbody>
       <tr>
         <td>Item1</td>
         <td class="price-1">50</td>
       </tr>
       <tr id="hiddenRow">
         <td>Item2</td>
         <td class="price-2">13</td>
       </tr>
       <tr>
        <td>Item3</td>
        <td class="price-3">30</td>
       </tr>
       <tr class="summary">
        <td class="totalOrder">Total:</td>
        <td id="result" class="totalAmount"></td>
       </tr>

     </tbody>
   </table>
 </div>

JS显示隐藏表格行:

// hide table row from order total if not checked
$("input[name='product_CD']").on("click", function() {
    $("#hiddenRow").toggleClass('show');
});

这是选中复选框时行显示方式的屏幕截图。

请注意行的宽度和价格列是如何不对齐的。如果该行最初没有隐藏，它可以很好地预览，并且在检查元素并手动切换 #hiddenRow display:none css 时，它还会在浏览器中切换可见/隐藏和关闭。

Answer 1

我做了一个 jsfiddle:https://jsfiddle.net/ov7d9rLa/

我认为问题可能是由于在使用 bootstrap 和 CSS 进行隐藏/显示之间发生争执。我通过使用“隐藏” Bootstrap 类并使用点击事件切换该类来简化这一点。

<div class="orderTotal">
   <h4>Order Total:</h4>

   <table id="tableOrderTotal" class="table tableTotal">
    <tbody>
       <tr>
         <td>Item1</td>
         <td class="price-1">50</td>
       </tr>
       <tr id='hiddenRow' class="hidden">
         <td>Item2</td>
         <td class="price-2">13</td>
       </tr>
       <tr>
        <td>Item3</td>
        <td class="price-3">30</td>
       </tr>
       <tr class="summary">
        <td class="totalOrder">Total:</td>
        <td id="result" class="totalAmount"></td>
       </tr>

     </tbody>
   </table>
 </div>

 <button id='toggle' class='btn btn-primary'>
Toggle
</button>

JS:

$("#toggle").on("click", function() {
    $("#hiddenRow").toggleClass("hidden");
});