我试图通过单击单选按钮来打开一个bootstrap下拉列表,但是这听起来很简单,却让我头痛不已。
根据Bootstrap的说明,您可以使用带有
问题在于,单选按钮不允许
我简化了代码,以便更简单地说明我的问题并复制它。您可以在CODEPEN中看到下拉列表可用,但单选按钮没有显示“Hello Offender”。如果您删除
以下是我的代码:
根据Bootstrap的说明,您可以使用带有
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这里
谢谢!