Показать/скрыть (через функцию свертывания Bootstrap) на основе переключателя

Я пытаюсь использовать функцию свертывания Bootstrap, чтобы показать/скрыть divs, на основе которого установлен переключатель. Я смог заставить все работать нормально, когда я не использую функцию свертывания 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/

К сожалению, я что-то упускаю, потому что поведение странно, а не то, что я ожидаю. Любая помощь приветствуется.

Ответ 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, чтобы выполнить то, что вам нужно. Мой подход заключался в том, чтобы соединить переключатели и divs с классами, чтобы вы могли СУБДИТЬ свой код.

Ответ 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().

Ответ 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');
   }
 });
});