引导表如何隐藏，当使用javascript切换可见时，它没有正确显示

Question

我有一张鞋带桌子。我最初使用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

我做了个小摆弄：https://jsfiddle.net/ov7d9rLa/

我认为问题可能是由于使用引导和CSS隐藏/显示之间的斗争。我使用引导类“隐藏”简化了这一点，并将该类与click事件切换。

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

联署材料：

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

Answer 2

我不会使用所有的css。在我看来，jQuery使它清洁了100倍。我会这样做：

我会利用jQuery的hide()和toggle()。就像这样：

$(document).ready(function() {

  // Hide the row when the page loads
  $("#hiddenRow").hide();

  // when the user clicks the checkbox, toggle the row
  $("#toggleCheck").click(function() {

    $("#hiddenRow").toggle();

  })

});

这是一个完整的JSBin：http://jsbin.com/nokusunamo/edit?html,js,console,output

Answer 3

工作小提琴。

只需按@Louys在以上评论中建议的那样使用以上评论：

#hiddenRow.show{
     display: table-row;
}

希望这能有所帮助。

​

$("input[name='product_CD']").on("click", function() {
  $("#hiddenRow").toggleClass('show');
});

#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; 
}

#hiddenRow.show{
  display: table-row;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input name='product_CD' type="checkbox" />
<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>

​