通過單選按鈕激活的引導數據切換下拉菜單

Question

我正在嘗試通過單擊單選按鈕來打開引導程序下拉列表，但聽起來很簡單，這給了我一天的麻煩。

根據Bootstrap的說明，您可以使用超鏈接或其中帶有data-toggle="dropdown"按鈕來打開下拉data-toggle="dropdown" 。 您還可以使用$('.dropdown-toggle').dropdown()但觸發器必須仍然具有data-toggle="dropdown"才能起作用。

問題是，單選按鈕不允許data-toggle="dropdown" ，如果我將單選選項包裝在其自己的超鏈接標記中並向其添加切換，則該下拉列表有效，但單選按鈕本身不起作用，我需要兩者同時工作。 單選按鈕將執行一個操作，同時顯示一個下拉列表以允許第二個操作。

我簡化了代碼以給出一個簡單的示例，並復制了我的問題。 您可以在CODEPEN中看到該下拉列表有效，但是單選按鈕不顯示“ Hello Offender”。 如果刪除<a>...</a>您將看到單選按鈕有效，但下拉列表無效。 我怎樣才能同時工作？

這是我的代碼

        <div class="form-group widget-header-radio-group">
            <div class="radio-group inline-radio">
                <input id="individualForm" class="radio-custom " name="radio-group" type="radio" checked>
                <label for="individualForm" class="radio-custom-label">Individual</label>
            </div>
            <div class="radio-group inline-radio">
                <input id="businessForm" class="radio-custom" name="radio-group" type="radio">
                <label for="businessForm" class="radio-custom-label">Business</label>
            </div>
            <div class="radio-group inline-radio">
                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                    <input id="offenderForm" class="radio-custom" name="radio-group" type="radio">
                    <label for="offenderForm" class="radio-custom-label">Offender</label>
                    <ul class="dropdown-menu" id="dropdownMenu">
                        <li id="stateOff"><a href="#">State</a></li>
                        <li id="federalOff"><a href="#">Federal</a></li>
                        <li id="countyOff"><a href="#">County</a></li>
                    </ul>
                </a>
            </div>
        </div>

        <div id="indDemo" class=""> Hello Individual</div>  
        <div id="busDemo" class=""> Hello Business</div>    
        <div id="offDemo" class=""> Hello Offender</div>    

$(document).ready(function () {

    $('#busDemo').hide();
    $('#offDemo').hide();

    $('#individualForm').change(function () {
        if (this.checked) {
            $('#indDemo').show();
            $('#busDemo').hide();
            $('#offDemo').hide();
        }
    });

    $('#businessForm').change(function () {
        if (this.checked) {
            $('#busDemo').show();
            $('#indDemo').hide();
            $('#offDemo').hide();
        }
    });


    $('#offenderForm').change(function () {
        if (this.checked) {
            $('#offDemo').show();
            $('#indDemo').hide();
            $('#busDemo').hide();
        }
    });


});

在這里查看CODEPEN

謝謝！

Answer 1

從錨點內部取出單選按鈕，因為錨點包圍了單選按鈕，因此不會觸發單選按鈕更改事件。 修改單選按鈕更改處理程序，如下所示：

$('#offenderForm').change(function () {
        if (this.checked) {
            $('#offDemo').show();
            $('#indDemo').hide();
            $('#busDemo').hide();
            $(this).siblings('a.dropdown-toggle').click();
        }
    });

http://codepen.io/anon/pen/dXAQXX

編輯：將此添加到您的javascript代碼：

$('a.dropdown-toggle').click(function(){
       $(this).siblings('input').click();
   });

這樣，當您單擊錨點時，將觸發單選按鈕上的單擊事件。 同樣，當您單擊單選按鈕時，錨點上的click事件也會被觸發

Answer 2

如果輸入字段在錨點內，則輸入字段將永遠不會收到更改事件。 但是您可以將事件委托給父div並測試您單擊的錨點是否包含要查找的輸入元素：

 $(document).ready(function () { $('#busDemo').hide(); $('#offDemo').hide(); $('#individualForm').change(function () { if (this.checked) { $('#indDemo').show(); $('#busDemo').hide(); $('#offDemo').hide(); } }); $('#businessForm').change(function () { if (this.checked) { $('#busDemo').show(); $('#indDemo').hide(); $('#offDemo').hide(); } }); // delegate the event differently $('div.radio-group.inline-radio').on('click', 'a', function (e) { var offenderForm = document.getElementById('offenderForm'); if (this.contains(offenderForm)) { offenderForm.checked = !offenderForm.checked; if (offenderForm.checked) { $('#offDemo').show(); $('#indDemo').hide(); $('#busDemo').hide(); } } }); }); 

 .dropdown-menu{ left: 200px; top: 60px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!-- unchanged HTML --> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="form-group widget-header-radio-group"> <div class="radio-group inline-radio"> <input id="individualForm" class="radio-custom " name="radio-group" type="radio" checked> <label for="individualForm" class="radio-custom-label">Individual</label> </div> <div class="radio-group inline-radio"> <input id="businessForm" class="radio-custom" name="radio-group" type="radio"> <label for="businessForm" class="radio-custom-label">Business</label> </div> <div class="radio-group inline-radio"> <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"> <input id="offenderForm" class="radio-custom" name="radio-group" type="radio"> <label for="offenderForm" class="radio-custom-label">Offender</label> <ul class="dropdown-menu" id="dropdownMenu"> <li id="stateOff"><a href="#">State</a></li> <li id="federalOff"><a href="#">Federal</a></li> <li id="countyOff"><a href="#">County</a></li> </ul> </a> </div> </div> </div> </div> <div calss="row"> <div class="col-xs-12"> <div id="indDemo" class=""> Hello Individual</div> <div id="busDemo" class=""> Hello Business</div> <div id="offDemo" class=""> Hello Offender</div> </div> </div> </div> 

Answer 3

試試這個

 function hideAllbut(id) { $('#indDemo').hide(); $('#busDemo').hide(); $('#offDemo').hide(); $('.dropdown-menu').hide() if (id) $('#' + id).show(); } $('#individualForm').change(function() { hideAllbut('indDemo'); }); $('#businessForm').change(function() { hideAllbut('busDemo'); }); $('#offenderForm').click(function() { hideAllbut('offDemo'); $('.dropdown-menu').dropdown().show(); }); $('.dropdown-menu a').click(function() { $('#offDemoSub').html(this.innerHTML); $('.dropdown-menu').dropdown().hide(); }); hideAllbut('indDemo'); 

 .dropdown-menu { left: 150px !important; top: 60px !important; } #offDemoSub { padding-left: 20px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="form-group widget-header-radio-group"> <div class="radio-group inline-radio"> <input id="individualForm" class="radio-custom " name="radio-group" type="radio" checked> <label for="individualForm" class="radio-custom-label">Individual</label> </div> <div class="radio-group inline-radio"> <input id="businessForm" class="radio-custom" name="radio-group" type="radio"> <label for="businessForm" class="radio-custom-label">Business</label> </div> <div class="radio-group inline-radio"> <input id="offenderForm" class="radio-custom" name="radio-group" type="radio"> <label for="offenderForm" class="radio-custom-label">Offender</label> <ul class="dropdown-menu" id="dropdownMenu"> <li id="stateOff"><a href="#">State</a></li> <li id="federalOff"><a href="#">Federal</a></li> <li id="countyOff"><a href="#">County</a></li> </ul> </div> </div> </div> </div> <div calss="row"> <div class="col-xs-12"> <div id="indDemo" class=""> Hello Individual</div> <div id="busDemo" class=""> Hello Business</div> <div id="offDemo" class=""> Hello Offender <div id="offDemoSub" class=""></div> </div> </div> </div> </div>