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 的回复（对不起，我没有足够的声誉来添加评论），我会回复 Dean Richardson 关于如何做他想做的事，而不需要任何额外的 JS 代码。纯 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 回答