Bootstrap崩潰表

我試圖讓幾行崩潰，當我點擊父行。目前，我只能摺疊單行，但我需要能夠同時關閉+2行。Bootstrap崩潰表

下面是我目前的代碼，在這段代碼中，當我單擊第一行時，我無法弄清楚如何摺疊「HIDDEN」和「HIDDEN 2」行。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 
<style> 
.hiddenRow { 
    padding: 0 !important; 
} 
</style> 


<div id="accordion" role="tablist" aria-multiselectable="true"> 
    <table class="table"> 
    <tr id="main" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
     <td> 
     test 
     </td> 
    </tr> 

    <tr> 
     <td class="hiddenRow"> 
     <div id="collapseOne" class="collapse in" aria-labelledby="headingOne">HIDDEN</div> 
     </td> 
    </tr> 

    <tr> 
     <td class="hiddenRow"> 
     <div id="collapseTwo" class="collapse in" aria-labelledby="headingTwo">HIDDEN 2</div> 
     </td> 
    </tr> 
    </table> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

來源

2017-06-12 Graeham B

哪裏是你的JS？ – Rafael

你是什麼意思？這僅僅是一個HTML頁面，無論從jQuery和引導 –

而不是id="main" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"使用此示例。 https://jsfiddle.net/ayang10/DTcHh/33622/

<tr data-toggle="collapse" data-target=".order1"> 
      <td>+</td> 
      <td>1001</td> 
      <td>9/29/2016</td> 
      <td>$126.27</td> 
     </tr> 
     <tr class="collapse order1"> 
      <td>1</td> 
      <td></td> 
      <td>Shirt</td> 
      <td>$12.27</td> 
     </tr> 
     <tr class="collapse order1"> 
      <td>1</td> 
      <td></td> 
      <td>Shoes</td> 
      <td>$62.27</td> 
     </tr>

來源

2017-06-12 18:47:16

腳本拋開你可以改變HTML以'<表類= 「表」> 測試 HIDDEN HIDDEN 2 ' –

JS小提琴的工作原理我需要我的工作，但是，當我把它移動到一個HTML文件，它只顯示第一個隱藏的元素，我很不確定爲什麼它無法找到第二個隱藏元素 –

當我使用您在評論中添加的html時，發生了同樣的情況 –

因爲它似乎引導使用href調用合攏函數，它是不可能在同一時間崩潰比行更多。這是因爲href只能保存一個鏈接，在這種情況下，它是成功摺疊的行的id。我嘗試了一些黑客行爲，例如使用內聯onclick="location.href = '#collapseOne #collapseTwo'"即時給予href兩個鏈接，但這並不起作用。還嘗試從使用href作爲collapser切換到data-target，這應該與data-toggle一起使用來定義多個目標，但也不成功。這看起來像它是引導一個開放的問題：

https://github.com/twbs/bootstrap/issues/19813

這意味着，最好的辦法是要麼使用一些CSS魔法即#main:active {.collapse {display:none}}（僅適用於像less或sass預處理器）或寫一些jQuery的輕鬆達到效果。

$(document).ready(function() { 
    $("#main").on("click", function(){ 
     $("#collapseOne, #collapseTwo").hide(); 
    }); 
});

此實現只隱藏目標的ID，類似的.toggle()代替.hide()將是雙向的。

另一種方法是將表格嵌入成功摺疊的行內，這應該摺疊行內的整個表格。但是這只是一個噴射球，我還沒有測試過。

這裏有一些重複尋求解決同樣的問題！

Expand/collapse multiple table rows with a more elegant solution

expand/collapse table rows with JQuery

來源

2017-06-12 18:54:34 marcx

Bootstrap崩潰表

回答

相關問題