68

私は最近ブートストラップに出くわし、ヒーローの例を拡張することに取り組んでいます。ページに次の動作を追加したい:

ボタン (つまり、セレクター '.row .btn' を持つ要素) がクリックされたときに、ボタンの上のテキスト部分の展開/折りたたみを切り替えられるようにしたいと考えています。

HTML は次のようになります。

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

jQueryを使用してこれをハックできますが、ブートストラップの方法でそれを行う方法はありますか? - つまり、Bootstrap API を使用していますか?

4

5 に答える 5

152

リンクの data-collapse および data-target 属性を使用して、追加の JS コードを使用せずにこれを行うことができます。

例えば

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

これが実際の例です。

于 2012-12-06T19:29:03.527 に答える
71

ドキュメントに基づいて

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

作業デモ。

于 2012-08-15T11:43:56.053 に答える
30

Taylor Gautier の返信をもう少し詳しく説明すると (申し訳ありませんが、コメントを追加するのに十分な評判がありません)、追加の JS コードなしで、彼が望むことを行う方法について Dean Richardson に返信します。純粋な CSS。

.btn彼を次のように置き換えます。

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

そして、コンテンツが表示されるときの小さな CSS を追加します。

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

これが彼の修正された例です

于 2013-10-04T20:27:15.677 に答える
11

プラスとマイナスのボタンで開閉する「展開/折りたたみ」コンテナーが必要でした。これは標準のブートストラップ イベントを使用し、アニメーションがあります。BS3です。

ここに画像の説明を入力

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

例：

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

于 2014-10-14T19:33:46.293 に答える
1

html:

<h4 data-toggle-selector="#me">toggle</h4>
<div id="me">content here</div>

js:

$(function () {
    $('[data-toggle-selector]').on('click',function () {
        $($(this).data('toggle-selector')).toggle(300);
    })
})
于 2016-06-28T04:34:03.307 に答える