我尝试使用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/
不幸的是，我错过了一些东西，因为行为是奇怪的，不是我所期望的。