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()。

Answer 3

除非我弄错了，否则如果你有另一组具有不同名称属性的单选按钮，@ jwadsack代码将无法正常工作。

那是因为$item和$target变量是全局声明的。 $item变量将被最后一个组覆盖，只有这个变量会隐藏/显示collaspe。

在变量定义之前添加var似乎可以解决问题。

然后代码

$('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折叠功能上）div基于单选按钮

3 个答案: