如何在單選按鈕列表中使用Bootstrap手風琴

我正在嘗試構建一個UI，它將HTML單選按鈕列表與Bootstrap的collapse組件提供的手風琴功能相結合。我們的目標是選擇任何單選按鈕也可以在它下方擴展一個手風琴面板。如何在單選按鈕列表中使用Bootstrap手風琴

Here's a JsFiddle這表明部分工作的實現。不幸的是，雖然手風琴功能起作用，但單選按鈕不會被選中（除了初始選擇之外，其後不會改變）。

請原諒我樣本中的HTML無效。我知道一個input元素沒有href屬性，但我不認爲這是問題的原因。

我見過this answer到類似的問題，但我寧願避免編輯引導代碼，並希望有可能使這項工作的一個純粹的聲明方式。

非常感謝您的建議，添

編輯：對於任何人面臨同樣的問題，這個功能可以運行出的現成的引導V3.0。

來源

2013-08-07 Tim Coulter

我得到它與一個額外的jQuery的工作。 jsFiddle

我敢肯定，有這樣做的更優雅的方式。但它的工作原理。

$('#collapseOne').on('shown', function(){ 
    $('#radio1').prop('checked', true); 
}); 

$('#collapseTwo').on('shown', function(){ 
    $('#radio2').prop('checked', true); 
}); 

$('#collapseThree').on('shown', function(){ 
    $('#radio3').prop('checked', true); 
});

來源

2013-08-07 18:26:32 Schmalzy

感謝您的快速回答。我仍然好奇是否有一個純粹的聲明式解決方案，但您的解決方案確實可行並且足夠好。謝謝。 –

感謝您的解決方案，但是一些奇怪的副作用是單擊已啓用的單選按鈕將使得accordeon再次崩潰。 – Jorre

下面的代碼稍微更優雅，但基於Schmalzy的答案。

這並不奏效，但確實減少了所有手風琴切換的代碼塊。

我想避免更新JS代碼，如果我添加額外的切換。

$("[id^=collapse]").on('shown', function(){ 
    $(this).parents('.accordion-group').find('.accordion-toggle') 
     .prop('checked', true); 
});

來源

2013-08-22 21:26:54 AMJones

的問題確實是標籤上的href屬性。改爲使用標籤上的data-target屬性。

Bootstrap假定有效的html，並且href將位於錨標記上。因此它會阻止遵循鏈接並執行摺疊的默認操作。在你的情況下，單擊標籤的默認操作是檢查相關的輸入。 Bootstrap阻止了這一點。

來源

2013-12-06 21:28:33

如何在單選按鈕列表中使用Bootstrap手風琴

回答

相關問題