Afficher / Masquer (via la fonction de réduction de Bootstrap) divs basé sur le bouton radio

Je suis en train d'utiliser Bootstrap de l'effondrement de la fonctionnalité afficher/masquer les divisions fondées sur le bouton-radio est coché. J'ai été en mesure d'obtenir les choses fonctionne bien lorsque je n'utilise pas de fichier d'amorce de l'effondrement de la fonction, cependant, afin de donner plus de cohérence à sentir que je voudrais profiter de cette fonction.

Voici un extrait de l'HTML en question:

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

Et voici mon 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');
    }
  });
};

Voici un lien vers un JS fiddle avec tout cela: http://jsfiddle.net/DTcHh/156/

Malheureusement, je suis absent quelque chose, provoquer le comportement est bizarre et pas ce que je m'attends. Toute aide est très appréciée.

source d'informationauteur Harry Muscle

  1. 8

    Tout d'abord, excellente question. Vous code fourni, il ressort clairement de ce que vous avez essayé, etc. L'amour c'.

    Je bifurquais votre JSFiddle, et est venu avec ceci:
    http://jsfiddle.net/emptywalls/EgVF9/

    Voici le Javascript:

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

    Je ne recommandent pas l'utilisation de l'effondrement de la fonctionnalité de Bootstrap, il repose sur un tout autre DOM structure de ce dont vous avez besoin. Mon violon utilise jQuery pour accomplir ce que vous avez besoin. Mon approche a été de pair les boutons de la radio et de la vrd avec des classes, de sorte que vous pouvez SÉCHER votre code.

  2. 7

    @Emptywalls mentionné, le Bootstrap de l'effondrement de la fonction ne fonctionne pas. Je l'ai essayé et il ne fait presque, sauf qu'il est basé sur cliquant la source de l'élément, et non pas son état. Un bouton radio doit faire attention à son état.

    Mais je voulais quelque chose qui m'a permis de marquer l'élément avec les balises de données et qu'il hérite de la fonctionnalité, comme le bootstrap de l'effondrement. Donc, je suis venu avec cette:

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

    Et alors ce inclus une fois dans votre site et il s'appliquera à tous les boutons. 

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

    Il utilise l'effondrement de la fonction d'Amorçage pour l'animation. Vous pourriez tout aussi bien utiliser jQuery hide() et show().

  3. 1

    Si je ne me trompe, @jwadsack code ne fonctionne pas si vous avez un autre groupe de boutons radio avec un autre nom de l'attribut.

    C'est parce que la $item et $target les variables sont déclarées à l'échelle mondiale. Le $item variable sera overidded par le dernier groupe et seulement celui-ci permet de masquer/afficher la collaspe.

    Ajoutant var avant la définition de la variable qui semble résoudre le problème.

    Le code est alors 

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