afficher/masquer twitter bootstrap onglets

Je suis en utilisant bootstrap pour l'affichage du contenu au-dessous des onglets, mais je veux de l'effondrement des onglets lorsque l'onglet est cliqué à nouveau. Voici le code que j'ai essayé pour se rendre au travail, en vain: 

    <ul id="myTab" class="nav nav-tabs">
        <li class="square"><a class="story" href="#article1" data-toggle="tab"><img src="#"/></a></li>
        <li class="square"><a class="story" href="#article2" data-toggle="tab"><img src="#g"/></a></li>
        <li class="square"><a class="story" href="#article3" data-toggle="tab"><img src="#"/></a></li>
               <div id="article1" class="tab-pane fade"><p>Lorem ipsum...</p></div>
               <div id="article2" class="tab-pane fade"><p>Lorem ipsum dolor sit amet....</p</div>
               <div id="article3" class="tab-pane fade"><p>Lorem ipsum dolor sit amet...</p></div>
    </ul>

<script>
$('#myTab a').click(function (e) {
            if($(this).tab.hasClass('active')){
                    $(this).tab('hide');
                } else {
                        e.preventDefault();
                        $(this).tab('show');
                    }
                })
</script>

Je ne suis pas sûr si les onglets sont censés travailler de cette façon...devrais-je essayer de l'effondrement de la fonctionnalité?

InformationsquelleAutor AshAndrien | 2012-12-28
  1. -4

    Oui, il semble que vous voulez Bootstrap effondrement du widget. Cela dit, cette jQuery permet de masquer déjà de l'onglet actif:

    $('#myTab a').click(function (e) {
    if($(this).parent('li').hasClass('active')){
        $( $(this).attr('href') ).hide();
    }
});​

    Le problème est que cela empêche un caché onglet d'être montré à nouveau, donc je ne pense pas que vous aurez envie de l'utiliser. Voir http://jsfiddle.net/jhfrench/NQ97h/

    Si vous voulez être en mesure d'apporter l'onglet de dos, essayez de:

    $('#myTab a').click(function (e) {
    if($(this).parent('li').hasClass('active')){
        var target_pane=$(this).attr('href');
        $( target_pane ).toggle( !$( target_pane ).is(":visible") );
    }
});

    Voir http://jsfiddle.net/epT3L/ pour cette solution.

    • Oh, et si vous voulais faire cette ré-utilisable, vous voulez sélectionner $('.nav a'), pas $('#myTab a')...
    • Merci, j'ai effectivement mis à la régulière jquery slideToggle, avec un certain succès.
    • J'ai essayé ceci, mais si vous voulez ré-activer l'onglet, il l'habitude de travailler.
    • si vous voulez le ramener (dont l'affiche originale n'a pas demandé), essayez de $('#myTab a').click(function (e) { if($(this).parent('li').hasClass('active')){ var target_pane=$(this).attr('href'); $( target_pane ).toggle( !$( target_pane ).is(":visible") ); } }); Voir jsfiddle.net/epT3L
    • Downwoted que la solution est incomplète, c'est à dire lorsqu'un onglet est masqué, c'est de rester caché, même après le passage d'un autre onglet
    InformationsquelleAutor Jeromy French
  2. 19

    Voici un tweak de Jeromy de la solution qui, je crois, est-ce que vous voulez:

    $('#myTab a').click(function (e) {
    var tab = $(this);
    if(tab.parent('li').hasClass('active')){
        window.setTimeout(function(){
            $(".tab-pane").removeClass('active');
            tab.parent('li').removeClass('active');
        },1);
    }
});

    http://jsfiddle.net/NQ97h/39/

    • Qui fonctionne, btw. il n'y a pas besoin de valeur de délai d'expiration que la fonction sera exécutée après l'exécution de la file d'attente de messages de courant de la pile, même lorsqu'il est omis
    • et d'ajouter } else { tab.tab('show'); } de faire des onglets togglable
    • Je ne pouvais pas le faire fonctionner sans le setTimeout (jsfiddle.net/5f2wvgxq/1), mais, quel que soit (testé sur Safari 7.1.3). Et la clause else vous l'avez suggéré, ne semble pas faire une différence (jsfiddle.net/5f2wvgxq/2). Les onglets de violon que j'ai référencé dans ma réponse sont déjà togglable. Désolé, je suis probablement juste de l'incompréhension.
    • Je voulais parler de la "valeur de délai d'expiration" de 1 ms qui peut être omis, pas la setTimeout fonction elle-même. jsfiddle.net/NQ97h/662. Je dois ajouter qu'il n'est pas adapté pour les listes déroulantes
    InformationsquelleAutor Chris Bartley
  3. 2

    Eu le même problème et l'a résolu en modifiant le bootstrap.js.

    Trouver l'onglet définition de la classe (généralement de ligne 1783) sur Tab.prototype.show de la fonction et de modifier:

    if ($this.parent('li').hasClass('active')) return

    à 

    if ($this.parent('li').hasClass('active')) {
            $this.parent('li').removeClass('active')
            $(selector).removeClass('active')
            return
        }

    Il fonctionnera comme prévu et sans créer des scripts personnalisés" dans votre projet.

    EDIT:

    Cette modification affecte CHAQUE panneau d'onglets dans votre projet, cependant, si vous voulez faire cet effet uniquement sur les objets souhaités, vous aurez besoin d'ajouter un peu de data-hide ou quelque chose comme ça, telles que:

    if ($this.parent('li').hasClass('active')) {
            if ($this.parent('li').attr('data-hide') == "on") {
                $this.parent('li').removeClass('active')
                $(selector).removeClass('active')
            }
            return
        }

    ensuite, chaque parent <li> avec data-hide va se cacher lors d'un clic.

    InformationsquelleAutor Rickedb
  4. 1

    J'ai une version qui fonctionne (dans mon cas, juste pour les onglets principaux, vous aurez à le modifier pour gérer la liste des onglets.) Je viens de le jeta dans une fourchette de Jeromy de jsfiddle ci-dessus: http://jsfiddle.net/HsqQQ/3/

    Voici le code:

     $(document).off('click.tab.data-api');
    $(document).on('click.tab.data-api', '[data-toggle="tab"]', function (e) {
        e.preventDefault();
        var tab = $($(this).attr('href'));
        var activate = !tab.hasClass('active');
        $('div.tab-content>div.tab-pane.active').removeClass('active');
        $('ul.nav.nav-tabs>li.active').removeClass('active');
        if (activate) {
            $(this).tab('show')
        }
    });
    InformationsquelleAutor Sigfried
  5. 0

    - Je obtenir un travail de bootstrap pilules de navigation qui prend en charge d'ouverture/de fermeture à bascule avec ce code:

    jQuery(function() {
//Closing active pill when clicking on toggle:
jQuery(document).off('click.bs.tab.data-api');
jQuery(document).on('click.bs.tab.data-api', '[data-toggle="pill"]', function(e) {
    e.preventDefault();
    var activeClass = 'active';
    var tab = jQuery(this).attr('href');
    var tab = tab && tab.replace(/.*(?=#[^\s]*$)/, ''); //strip for ie7
    var tab = jQuery(tab);
    if (!tab.hasClass(activeClass)) {
        jQuery(this).tab('show');
    } else {
        jQuery(this).parent().removeClass(activeClass);
        tab.parent().children().removeClass(activeClass);
    }
});

    });

    InformationsquelleAutor Eckonator
  6. 0

    Ce que sur le point de faire quelque chose comme ça? show.bs.tab sera toujours le feu avant de click et qu'il donnera click le droit de l'état

    $(document).on('show.bs.tab', '#myTab a', function(e) {
   if (!$(e.target).hasClass('active')) {
      $(e.target).addClass('monkeyPatch');
   }
});

$(document).on('click', '#myTab a', function(e) {
   var tab = $(this);
   if (tab.hasClass('monkeyPatch')) {
      tab.removeClass('monkeyPatch');
   } else {
      $('.tab-pane').removeClass('active');
      tab.parent('li').removeClass('active');
   }
});
    InformationsquelleAutor GEkk