显示/隐藏(通过Bootstrap的折叠功能)基于单选按钮的div

Question

我正在尝试使用Bootstrap的折叠功能来根据选中的单选按钮显示/隐藏div.当我不使用Bootstrap的折叠功能时,我能够正常工作,但为了给出更加一致的感觉,我想利用这个功能.

这是有问题的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>

这是我的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');
    }
  });
};

这是一个JS小提琴的链接所有这些:http://jsfiddle.net/DTcHh/156/

不幸的是我错过了一些东西,导致这种行为很奇怪,而不是我所期待的.任何帮助都非常感谢.

Answer 1

首先,优秀的问题.你提供了代码,明确了你的尝试,等等.喜欢它.

我分叉你的JSFiddle,并想出了这个:http: //jsfiddle.net/emptywalls/EgVF9/

这是Javascript:

$('input[type=radio]').on('change', function () {
    if (!this.checked) return
    $('.collapse').not($('div.' + $(this).attr('class'))).slideUp();
    $('.collapse.' + $(this).attr('class')).slideDown();
});

我不建议使用Bootstrap的折叠功能,它依赖于你需要的一个非常不同的DOM结构.我的小提琴只使用jQuery来完成你需要的东西.我的方法是将单选按钮和div与类配对,这样你就可以干掉你的代码了.

Answer 2

正如@emptywalls所提到的,Bootstrap崩溃函数不起作用.我尝试了它几乎没有,除了它是基于点击源元素,而不是它的状态.单选按钮需要注意它的状态.

但我想要的东西允许我用数据标签标记元素并让它继承功能,就像引导程序崩溃那样.所以我想出了这个:

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

然后在您的网站中包含一次,它将适用于所有此类按钮.

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

这使用Bootstrap的折叠功能来制作动画.您可以轻松使用jQuery hide()和show().