引导数据-由单选按钮激活的切换下拉菜单

Question

我试图通过点击一个单选按钮来打开一个引导下拉列表，但是这听起来很简单，但它给了我一个糟糕的一天。

根据引导程序，您可以使用带有data-toggle="dropdown"的超链接或按钮打开下拉列表。您也可以使用$('.dropdown-toggle').dropdown()，但是触发器仍然必须有data-toggle="dropdown"才能工作。

问题是，单选按钮不允许data-toggle="dropdown"，如果我将收音机选项包装在它自己的超链接标签中并将切换添加到它，那么下拉菜单就不能工作，但是单选按钮本身不能工作，我需要两者同时工作。单选按钮将执行操作，同时显示下拉框以允许第二操作。

我简化了代码，给出了一个简单的例子，并复制了我的问题。您可以在CODEPEN中看到下拉列表工作，但是单选按钮没有显示"Hello“。如果您删除<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 here

谢谢!

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();
   });

这样，当您单击锚时，单选按钮上的单击事件将被触发。同样，当您单击单选按钮时，将触发锚上的单击事件。

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>

​