Question

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

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

问题是，单选按钮不允许<a>...</a>，如果我将无线电选项包装在自己的超链接标签内并向其添加切换，则下拉列表有效，但不是单选按钮本身，我需要两者同时工作。单选按钮将执行操作，同时显示下拉列表以允许辅助操作。

我愚弄了代码以提供一个更简单的示例并复制我的问题。您可以在CODEPEN中看到下拉列表有效但单选按钮不显示“Hello Offender”。如果您删除<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(); } }); });您将看到单选按钮工作但不会显示下拉列表。我怎样才能让两者都起作用？

这是我的代码

2016-08-17 19:07:40,848 [ERROR] -----------------------BUILD FAILED!------------------------
2016-08-17 19:07:40,851 [ERROR] Unhandled exception during build: 'utf8' codec can't decode byte 0xfd in position 1245814: invalid start byte
Traceback (most recent call last):
  File "/opt/aws/bin/cfn-init", line 171, in <module>
    worklog.build(metadata, configSets)
  File "/usr/lib/python2.7/dist-packages/cfnbootstrap/construction.py", line 118, in build
    Contractor(metadata).build(configSets, self)
  File "/usr/lib/python2.7/dist-packages/cfnbootstrap/construction.py", line 505, in build
    self.run_config(config, worklog)
  File "/usr/lib/python2.7/dist-packages/cfnbootstrap/construction.py", line 517, in run_config
    CloudFormationCarpenter(config, self._auth_config).build(worklog)
  File "/usr/lib/python2.7/dist-packages/cfnbootstrap/construction.py", line 248, in build
    changes['commands'] = CommandTool().apply(self._config.commands)
  File "/usr/lib/python2.7/dist-packages/cfnbootstrap/command_tool.py", line 120, in apply
    log.debug(u"Command %s output: %s", name, commandResult.stdout.decode('utf-8'))
  File "/usr/lib64/python2.7/encodings/utf_8.py", line 16, in decode
    return codecs.utf_8_decode(input, errors, True)
UnicodeDecodeError: 'utf8' codec can't decode byte 0xfd in position 1245814: invalid start byte

请参阅CODEPEN here

谢谢！

Answer 1

如果输入字段位于锚点内，则输入字段将永远不会收到更改事件。但是您可以将事件委托给父div并测试您单击的锚是否包含您要查找的输入元素：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

从锚内部取出单选按钮，因为锚点正在包围单选按钮，因此单选按钮更改事件未被触发。修改单选按钮更改处理程序，如下所示：

$('#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 3

尝试这个

＆＃13;

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');

＆＃13;

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

＆＃13;

<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>

＆＃13;

由单选按钮

3 个答案: