2017-08-18 91 views
0

我一直在嘗試一次單擊摺疊多個目標。根據Bootstrap文檔,這可以通過指定與data-target屬性匹配的CSS選擇器來實現。然而,崩潰似乎只在匹配選擇器的第一個元素上起作用。這裏小例子:引導程序崩潰數據 - 目標選擇器失敗

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
    <script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
</head> 

<body> 
    <div class="device-icon-wrapper" data-toggle ="collapse" data-target=".Centrifuge2-collapsible">Collapse</div> 
    <div class="col properties collapse Centrifuge2-collapsible">Properties</div> 
    <div class="features Centrifuge2-collapsible collapse">Features</div> 
</body> 

如果我刪除或編輯類「Centrifuge2可摺疊」第一可摺疊格,第二格將成爲可摺疊。

Can Bootstrap摺疊目標多個元素?根據this回答,應該有可能。但是,在這種情況下,多個ID也失敗。

+1

當設置反映運行Bootstrap 4.0-beta時,您的示例在Bootply中運行。是否有可能使用Alpha版本是問題所在? –

+0

的確,這解決了這個問題。你想把這個答案變成答案,我可以接受它嗎? – Wingo

+0

我可能只是刪除了這個問題。鑑於答案是「使用最新版本」,問題依然沒有多大價值。 –

回答

0

正如指出的羅伯特·C,這是的4.0.0 alpha版本的問題,並已經解決在測試版中。更新Bootstrap版本解決了這個問題。

0

爲什麼不包裝在一個容器中的所有項目......

<!doctype html> 
 

 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
    <script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 

 
    <div class="device-icon-wrapper" data-toggle ="collapse" data-target=".Centrifuge2-collapsible">Collapse</div> 
 
    <div class="Centrifuge2-collapsible collapse"> 
 
    <div class="col properties">Properties</div> 
 
    <div class="features">Features</div> 
 
    </div>

+0

在這種情況下,當容器斷開並處於頁面的不同部分時,這不是一個真正的選項。當然,在最簡單的例子中,這可能是一個有效的選擇。 – Wingo