web-dev-qa-db-ja.com

Twitter Bootstrapボタンをクリックして、ボタンの上にあるテキストセクションの展開/折りたたみを切り替えます

私は最近bootstrapに出会い、主人公の例を拡張しようと取り組んでいます。ページに次の動作を追加したい：

ボタン（つまり、セレクター '.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の方法でそれを行う方法はありますか？ -Bootstrap AP​​Iを使用していますか？

javascriptjquerycsstwitter-bootstrap
66
Homunculus Reticulli

ドキュメント に基づく

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

作業デモ 。

70
Sherbrow

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

例えば.

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

これが実際の例です 。

152
Taylor Gautier

Taylor Gautierの返信についてもう少し詳しく説明します（申し訳ありませんが、コメントを追加するのに十分な評判はありません）。純粋な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 »'; 
}

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

29
Giovanni Silveira

開いたり閉じたりするためのプラスボタンとマイナスボタンを備えた「展開/折りたたみ」コンテナが必要でした。これは標準のbootstrapイベントを使用し、アニメーションがあります。これは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');
  })
})

例：

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

11
Jess

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);
    })
})
1
CMS