Pouvez-vous préciser un “data-target” pour "Bootstrap" qui se réfère à un frère ou une sœur de l'élément DOM sans l'aide d'un ID?

S'il est vrai que le sélecteur dans un data-target attribut est un sélecteur jQuery, les données-spécification de l'api pour ce plugin fournit pas les moyens de référencement de retour à this dans le cadre de l'exécution (voir lignes 147-153 dans bootstrap-collapse.js pour son utilisation).

Cependant, je voudrais proposer une autre approche alternative, qui consiste à étendre les données de l'api avec votre propre basculer spécificateur. Appelons ça de la effondrement prochain.

JS ^{(voir la mise à jour de la note)}

$('body').on('click.collapse-next.data-api', '[data-toggle=collapse-next]', function (e) {
  var $target = $(this).parent().next()
  $target.data('collapse') ? $target.collapse('toggle') : $target.collapse()
})

HTML

<a class="accordion-toggle" data-toggle="collapse-next">

JSFiddle (mise à jour)

Inconvénient ici est que c'est un peu étroitement associée démarche de, depuis la JS suppose une structure spécifique pour le balisage.

---

Note sur IE questions

Comme @slhck l'a souligné dans sa réponse, IE9 et en vertu apparemment échouer sur le premier clic lors de l'utilisation d'une version antérieure de ma réponse. La cause en est en réalité pas un IE problème du tout, mais plutôt un "Bootstrap" un. Si l'on invoque .collapse('toggle') sur une cible dont Carousel objet est initialisé, le toggle() méthode sera appelée deux fois - une fois lors de l'initialisation, puis à nouveau explicitement après l'initialisation. C'est certainement l'un Bootstrap bug et j'espère sera corrigé. La seule raison pour laquelle il n'a pas apparaissent comme un problème dans Chrome, FF, IE10, etc, c'est parce qu'ils soutiennent toutes les transitions CSS, et c'est pourquoi, lorsque le deuxième appel est effectué, il court-circuits, parce que le premier est toujours active. La mise à jour de la solution de contournement ci-dessus ne fait évite le double-appel de problème par la vérification de l'initialisation de la première et de la manipulation différemment.

Oui, vous pouvez le faire facilement!

Il suffit d'ajouter le code suivant à votre scripts et profitez de:

$('body').on('click','[data-toggle="collapse"][data-mytarget^="$("]',function(){
     eval($(this).data('mytarget')).collapse('toggle');
});

Maintenant, à chaque où dans votre code, vous pouvez définir la cible de l'effondrement par un entièrement dynamique jQuery commande à l'intérieur de data-mytarget.

Maintenant l'utiliser comme ça:

<a data-toggle="collapse" data-mytarget="$(this).parent().next()">Link</a>

ou

<a data-toggle="collapse" data-mytarget="$('#TopMenuBar').closest('ul')">Link</a>

ou

<a data-toggle="collapse" data-mytarget="[ EACH IDEAl JQUERY CODE OF YOU STARTED WITH $( ]">Link</a>

Démo:

JS:

$('body').on('click','[data-toggle="collapse"][data-mytarget^="$("]',function(){
     eval($(this).data('mytarget')).collapse('toggle');
});

CSS:

a{
  padding:10px;
  cursor:pointer;
  margin:20px;
}

HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  
<div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle btn btn-info" data-toggle="collapse" data-mytarget="$(this).parent().next()">Collapse It</a>
    </div>
    <div id="collapseOne" class="accordion-body collapse ">
      <div class="accordion-inner">
        Generated Content... this is big and sometimes needs collapsing
      </div>
    </div>
</div>

J'ai utilisé data-mytarget au lieu de data-target. Si vous utilisez data-target il travaille trop, mais la bibliothèque jQuery générer une erreur comme ceci: Uncaught Error: Syntax error, unrecognized expression: $(this).parent().next().

Donc j'ai défini ma propriété différente avec data-mytarget nom.

Je pense que la meilleure approche serait de faire cette itération tous les accordion-toggle éléments et définir leurs data-target attribut dynamiquement via jquery et après que la place le code de l'accordéon mentionné dans le bootstrap.

Exemple :

$(function(){
    $("a.accordion-toggle").each(function(index) {
        $(this).attr("data-target", "#" + $(this).parent().next().attr("id"));
    });

    //accoridon code
});

Espère que cela aidera

Ici est une approche qui évite de devoir les identificateurs uniques et évite un spécifique de la structure html.

Cette enferme chaque instance de l'effondrement de déclenchement et la cible dans une "section" de l'html. J'aime utiliser des sélecteurs de classe, en particulier pour les plusieurs instances. Dans ce cas, il évite d'avoir à créer artificiellement des Identifiants uniques.

Emprunt de @merv est une excellente réponse, j'ai nommé le data-toggle collapse-section similaire à son collapse-next, et ajouté un attribut de section.
Au lieu de parent().next(), cette recherche d'une plus proche (le) nom de la section, puis vers le bas pour le nom de la cible. Ils peuvent être des frères et sœurs ou à tout autre niveau.

(J'ai une convention de nommage à l'aide de "id..." comme préfixe pour les noms de classe qui sont utilisés comme des sélecteurs jquery, pour éviter de mélanger avec le style.)

HTML

<div class="accordion-group idCollapseSection">
  <div class="accordion-heading">
    <a class="accordion-toggle" data-toggle="collapse-section"
       data-section=".idCollapseSection" data-target=".idCollapseTarget">
      Generated Title
    </a>
  </div>
  <div>Any other html, at various depths.
    <div class="accordion-body collapse in idCollapseTarget">
      <div class="accordion-inner">
        Generated Content... this is big and sometimes needs collapsing
      </div>
    </div>
  </div>
</div>

JS

//------------------------------
//Bootstrap Collapse.
//------------------------------
//Extend collapse to contain trigger and target within an enclosing section.
$('body').on('click.collapse-section.data-api', '[data-toggle=collapse-section]', function (e) {
  var thisTrigger = $(this);
  var sectionSelector = thisTrigger.data("section");
  var targetSelector = thisTrigger.data("target");
  var target = thisTrigger.closest(sectionSelector).find(targetSelector);
  target.data('bs.collapse') ? target.collapse('toggle') : target.collapse();
});