twitter-bootstrap 基于单选按钮显示/隐藏（通过 Bootstrap 的折叠功能）div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21789749/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/Hide (via Bootstrap's collapse function) divs based on radio button
提问by Harry Muscle
I'm trying to use Bootstrap's collapse functionality to show/hide divs based on which radio button is checked. I was able to get things to work fine when I don't use Bootstrap's collapse function, however, in order to give a more consistent feel I'd like to take advantage of this function.
我正在尝试使用 Bootstrap 的折叠功能根据选中的单选按钮来显示/隐藏 div。当我不使用 Bootstrap 的折叠功能时，我能够让事情正常工作，但是，为了提供更一致的感觉，我想利用这个功能。
Here's a snippet of the HTML in question:
这是有问题的 HTML 片段：
<div class="col-xs-12 form-group">
<label class="radio-inline">
<input type="radio" id="send-now-radio" name="when" value="send-now" checked> <strong>Send Now</strong>
</label>
<label class="radio-inline">
<input type="radio" id="pickup-radio" name="when" value="pickup"> <strong>Hold for pickup</strong>
</label>
<label class="radio-inline">
<input type="radio" id="fax-radio" name="when" value="fax"> <strong>Fax</strong>
</label>
<label class="radio-inline">
<input type="radio" id="email-radio" name="when" value="email"> <strong>Email</strong>
</label>
</div>
<div class="col-xs-12">
<div id="send">Send</div>
<div id="pickup">Pickup</div>
<div id="fax">Fax</div>
<div id="email">Email</div>
</div>
And here's my javascript code:
这是我的 javascript 代码：
$(document).ready(function()
{
// Hide all but one method div (since all are shown in case the user has JS disabled)
$('#send').show();
$('#pickup').hide();
$('#fax').hide();
$('#email').hide();
// Attach to the radio buttons when they change
$('#send-now-radio, #pickup-radio, #fax-radio, #email-radio').on('change', function () {
// Make sure that this change is because a radio button has been checked
if (!this.checked) return
// Check which radio button has changed
if (this.id == 'send-now-radio') {
$('#send').collapse('show');
$('#pickup').collapse('hide');
$('#fax').collapse('hide');
$('#email').collapse('hide');
} else if (this.id == 'pickup-radio') {
$('#send').collapse('hide');
$('#pickup').collapse('show');
$('#fax').collapse('hide');
$('#email').collapse('hide');
} else if (this.id == 'fax-radio') {
$('#send').collapse('hide');
$('#pickup').collapse('hide');
$('#fax').collapse('show');
$('#email').collapse('hide');
} else // if (this.id == 'email-radio') {
$('#send').collapse('hide');
$('#pickup').collapse('hide');
$('#fax').collapse('hide');
$('#email').collapse('show');
}
});
};
Here's a link to a JS fiddle with all of this: http://jsfiddle.net/DTcHh/156/
这是所有这些的 JS 小提琴链接：http: //jsfiddle.net/DTcHh/156/
Unfortunately I'm missing something, cause the behavior is weird and not what I would expect. Any help is highly appreciated.
不幸的是，我遗漏了一些东西，因为行为很奇怪，而不是我所期望的。任何帮助都受到高度赞赏。
回答by emptywalls
First of all, excellent question. You provided code, made it clear what you tried, etc. Love it.
首先，很好的问题。您提供了代码，明确了您尝试过的内容等。喜欢它。
I forked your JSFiddle, and came up with this: http://jsfiddle.net/emptywalls/EgVF9/
我分叉了你的 JSFiddle，并想出了这个：http: //jsfiddle.net/emptywalls/EgVF9/
Here's the Javascript:
这是Javascript：
$('input[type=radio]').on('change', function () {
if (!this.checked) return
$('.collapse').not($('div.' + $(this).attr('class'))).slideUp();
$('.collapse.' + $(this).attr('class')).slideDown();
});
I wouldn't recommend using the collapse functionality from Bootstrap, it relies on a very different DOM structure from what you need. My fiddle uses just jQuery to accomplish what you need. My approach was to pair the radio buttons and divs with classes, so you can DRY up your code.
我不建议使用 Bootstrap 的折叠功能，它依赖于与您需要的完全不同的 DOM 结构。我的小提琴只使用 jQuery 来完成你需要的。我的方法是将单选按钮和 div 与类配对，这样你就可以干掉你的代码。
回答by jwadsack
As @emptywalls mentioned, the Bootstrap collapse function won't work. I tried it and it almost does, except that it is based on clickingthe source element, not it's state. A radio button needs to pay attention to it's state.
正如@emptywalls 所提到的，Bootstrap 折叠功能将不起作用。我试过了，几乎可以，只是它基于单击源元素，而不是它的状态。单选按钮需要注意它的状态。
But I wanted something that allowed me to mark up the element with data tags and have it inherit the functionality, as the bootstrap collapse does. So I came up with this:
但是我想要一些可以让我用数据标签标记元素并让它继承功能的东西，就像引导程序折叠一样。所以我想出了这个：
<input data-target="#send" data-toggle="radio-collapse" id="send_now_radio" name="when" type="radio" value="send-now">
<div id="send" class="collapse">Send</div>
And then have this included once in your site and it will apply to all such buttons.
然后将其包含在您的站点中一次，它将适用于所有此类按钮。
$('input[type=radio][data-toggle=radio-collapse]').each(function(index, item) {
var $item = $(item);
var $target = $($item.data('target'));
$('input[type=radio][name="' + item.name + '"]').on('change', function() {
if($item.is(':checked')) {
$target.collapse('show');
} else {
$target.collapse('hide');
}
});
});
This uses the collapse function of Bootstrap for the animation. You could just as easily use jQuery hide()and show().
这对动画使用了 Bootstrap 的折叠功能。您可以轻松地使用 jQueryhide()和show().
回答by cpaulus
Unless I'm mistaken, @jwadsack code won't work if you have another group of radio buttons with a different name attribute.
除非我弄错了，如果您有另一组具有不同名称属性的单选按钮，@jwadsack 代码将不起作用。
That's because the $itemand $targetvariables are declared globally. The $itemvariable will be overidded by the last group and only this one will hide/show the collaspe.
那是因为$item和$target变量是全局声明的。该$item变量将被最后一组覆盖，只有这一组将隐藏/显示折叠。
Adding varbefore the variable definition seems to fix the problem.
var在变量定义之前添加似乎可以解决问题。
The code is then
然后代码是
$('input[type=radio][data-toggle=radio-collapse]').each(function(index, item) {
var $item = $(item);
var $target = $($item.data('target'));
$('input[type=radio][name="' + item.name + '"]').on('change', function() {
if($item.is(':checked')) {
$target.collapse('show');
} else {
$target.collapse('hide');
}
});
});
