Twitter Bootstrap cliquez sur le bouton pour basculer expand/collapse section de texte bouton ci-dessus

Question

Twitter Bootstrap cliquez sur le bouton pour basculer expand/collapse section de texte bouton ci-dessus

Demandé el 15 de Août, 2012: Quand la question a-t-elle été
75590 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai récemment trouvé bootstrap et je suis en train de travailler sur l'extension du héros exemple. J'ajouterai à la suite d'un comportement de ma page:

Quand un bouton (c'est à dire un élément à l'aide du sélecteur '.ligne .btn') est cliqué, je veux être en mesure de basculer entre/déplier la partie de texte au-dessus du bouton.

C'est ce que le HTML ressemble à:

<html>
  <head>
      <title>Test Page</title>
    <!-- Le styles -->
    <link href="../assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
  </head>
  <body>
    <div class="navbar navbar-fixed-top">
    </div>

    <div class="container">
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>Blah, blah.</p>
        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
      </div>

      <!-- Example row of columns -->
      <div class="row">
        <div class="span4">
          <h2>Heading</h2>
           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
      </div>
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

  </body>
</html>

Je peux pirater ce à l'aide de jQuery, mais peut-être il ya un moyen de le faire, le fichier de Bootstrap? - c'est à dire en utilisant le Bootstrap de l'API?

Demandé el 15 de Août, 2012 par Homunculus Reticulli

Answer 1

4 Réponses

Answer 2

152voto

Taylor Gautier Points 2044

Il est possible de le faire sans l'aide supplémentaire du code JS en utilisant les données de l'effondrement des données et de la cible les attributs sur le lien.

par exemple

<a class="btn" data-toggle="collapse" data-target="#viewdetails">View details &raquo;</a>

Voici un exemple de travail.

Répondu el 6 de Décembre, 2012 par Taylor Gautier (2044 Points )

Answer 3

70voto

Sherbrow Points 11011

Basé sur la doc

<div class="row">
    <div class="span4 collapse-group">
        <h2>Heading</h2>
        <p class="collapse">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
</div>

$('.row .btn').on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    var $collapse = $this.closest('.collapse-group').find('.collapse');
    $collapse.collapse('toggle');
});

Travail de démonstration.

Répondu el 15 de Août, 2012 par Sherbrow (11011 Points )

Answer 4

29voto

Giovanni Silveira Points 854

Élaborer un peu plus sur Taylor Gautier répondre (désolé, je n'ai pas assez de réputation pour ajouter un commentaire), j'aimerais répondre à Dean Richardson sur la façon de faire ce qu'il voulait, sans ajouter de code JS. Pur CSS.

Vous devez remplacer son .btn avec les éléments suivants:

<a class="btn showdetails" data-toggle="collapse" data-target="#viewdetails"></a>

Et ajoutez un peu de CSS pour quand le contenu est affiché:

.in.collapse+a.btn.showdetails:before { 
    content:'Hide details «';
}
.collapse+a.btn.showdetails:before { 
    content:'Show details »'; 
}

Ici, c'est sa modifiés exemple

Répondu el 4 de Octobre, 2013 par Giovanni Silveira (854 Points )

Answer 5

11voto

Jess Points 2039

Je voulais un "agrandir/réduire" récipient avec une touche plus et moins pour l'ouvrir et le fermer. C'est BS3.

enter image description here

HTML:

<button id="button" type="button" class="btn btn-primary" 
  data-toggle="collapse" data-target="#demo">
  <span class="glyphicon glyphicon-collapse-down"></span> Show
</button>

<div id="demo" class="collapse">
  <ol class="list-group">
      <li class="list-group-item">Warrior</li>
      <li class="list-group-item">Adventurer</li>
      <li class="list-group-item">Mage</li>
  </ol>
</div>

JS:

$(function(){
  $('#demo').on('hide.bs.collapse', function () {
    $('#button').html('<span class="glyphicon glyphicon-collapse-down"></span> Show');
  })
  $('#demo').on('show.bs.collapse', function () {
    $('#button').html('<span class="glyphicon glyphicon-collapse-up"></span> Hide');
  })
})

Exemple:

http://plnkr.co/edit/aG5BtH?p=preview

Répondu el 14 de Octobre, 2014 par Jess (2039 Points )

Twitter Bootstrap cliquez sur le bouton pour basculer expand/collapse section de texte bouton ci-dessus

Réponses

HTML:

JS:

Exemple:

Questions en vedette

Top Tags

Prograide.com

Powered by:

Twitter Bootstrap cliquez sur le bouton pour basculer expand/collapse section de texte bouton ci-dessus

Réponses

HTML:

JS:

Exemple:

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: