0

特定のオプションを選択すると（はい）、より多くのコンテンツが表示されるドロップダウンを作成しようとしました。ブートストラップ アコーディオン機能を使用してこれを実行しようとしましたが、成功しませんでした。どのように動作させたいかの例として、ドロップダウンとアコーディオンのブートプライを作成しました。http://bootply.com/64676 - ドロップダウン リストで [はい] をクリックすると、その回答に関連するコンテンツが表示されたアコーディオンが開きます。

<label>Do you have any children?</label>
<select>
    <option>Select:</option>
    <option>Yes</option>
    <option>No</option>
</select>

<!-- Example of how I want the above working -->
<p>Name of your hotel - <a class="accordion-toggle" data-toggle="collapse" href="#hotel">Why do we need this?</a>
</p>

<!-- Popup hidden content -->
<div id="hotel" class="accordion-body collapse">
    <div class="alert">
            <h4>Content here!</h4>

        <p>blurb - how many?</p>
    </div>
4

1 に答える 1

1

まず、オプション値属性を確認する必要があります。ここに例を示しますhttp://jsfiddle.net/bnJvG/

<label>Do you have any children?</label>
<select name="children">
    <option value="">Select:</option>
    <option value="yes">Yes</option>
    <option value="no">No</option>
</select>

<div id="hotel" for-field="children" for-value="yes" class="accordion-body collapse">TEST</div>

そしてde JS

$('select[name="children"]').change(function(event){
    var selected = $(this).find('option:selected');
    var value = selected.attr("value");
    var name=  $(this).attr("name");
    var selector = '[for-field="'+name+'"]';
    $('.accordion-body'+selector).addClass('collapse');
    var selectorForValue = selector+'[for-value="'+value+'"]';
    var selectedPanel = $('.accordion-body'+ selectorForValue  );
    selectedPanel.removeClass('collapse');
})
于 2013-06-18T09:50:27.307 に答える