启动数据切换下拉由单选按钮激活

bootstrap data-toggle dropdown activated by radio button

本文关键字：单选按钮 激活 数据 启动      更新时间：2023-09-26

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

根据Bootstrap，您可以使用超链接或按钮打开下拉菜单，其中包含data-toggle="dropdown"。你也可以使用$('.dropdown-toggle').dropdown()，但触发器必须仍然有data-toggle="dropdown"为它的工作。

问题是，单选按钮不允许data-toggle="dropdown"，如果我在自己的超链接标签内包装单选选项并添加开关，则下拉工作，但不是单选按钮本身，我需要两者同时工作。单选按钮将执行一个操作，同时显示一个下拉菜单，以允许第二个操作。

我简化了代码以给出一个更简单的示例并复制了我的问题。你可以在CODEPEN中看到下拉菜单是有效的，但是单选按钮没有显示"你好，冒犯者"。如果你删除<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

谢谢!

从锚内取出单选按钮，因为锚包住了单选按钮，所以不会触发单选按钮更改事件。像这样修改单选按钮更改处理程序:

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

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

如果输入字段在锚内，则输入字段将永远不会收到更改事件。但是你可以将事件委托给父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>

试试这个

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>

相关文章：