3

collapseHTML ラジオ ボタン リストと、Bootstrap のコンポーネントが提供するアコーディオン機能を組み合わせた UI を構築しようとしています。目標は、任意のラジオ ボタンを選択すると、そのすぐ下のアコーディオン パネルも展開されることです。

これは、部分的に機能する実装を示すJsFiddleです。残念ながら、アコーディオン機能は動作しますが、ラジオ ボタンは選択されません (最初の選択は別として、その後変更されることはありません)。

私のサンプルの無効な HTML を許してください。input要素に属性がないことは承知してhrefいますが、これが問題の原因であるとは思いません。

同様の質問に対するこの回答を見たことがありますが、Bootstrap コードの編集を避け、純粋に宣言的な方法でこの作業を行うことができることを願っています。

あなたの提案に感謝します、ティム

編集:同じ問題に直面している他の人にとって、この機能は Bootstrap v3.0 ですぐに使用できます。

4

3 に答える 3

5

少し追加のjQueryで動作するようになりました。jsフィドル

これを行うためのよりエレガントな方法があると確信しています。しかし、それは機能します。

$('#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-07T18:26:32.280 に答える
4

以下のコードはもう少しエレガントですが、Schmalzy の回答に基づいています。

これはうまく機能しませんが、すべてのアコーディオン トグルに対して 1 ブロックのコードに削減されます。

トグルを追加した場合、JS コードの更新を避けたかったのです。

$("[id^=collapse]").on('shown', function(){
    $(this).parents('.accordion-group').find('.accordion-toggle')
         .prop('checked', true);
});
于 2013-08-22T21:26:54.960 に答える
2

問題は確かにhrefラベルの属性です。data-target代わりに、ラベルの属性を使用してください。

Bootstrap は、有効な html と、href がアンカー タグにあることを前提としています。そのため、リンクをたどるデフォルトのアクションを防ぎ、代わりに折りたたみを実行します。あなたの場合、ラベルをクリックするデフォルトのアクションは、関連する入力をチェックすることです。ブートストラップはそれを妨げています。

于 2013-12-06T21:28:33.557 に答える