Twitter Bootstrap 按钮单击以切换按钮上方的展开/折叠文本部分

Posted 2023-03-06

技术标签:

【中文标题】Twitter Bootstrap 按钮单击以切换按钮上方的展开/折叠文本部分【英文标题】：Twitter Bootstrap button click to toggle expand/collapse text section above button 【发布时间】：2012-08-11 16:12:55 【问题描述】：

我最近遇到了引导程序，我正在努力扩展 hero 示例。我想在我的页面中添加以下行为：

当单击按钮（即带有选择器“.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 API？

【问题讨论】：

【参考方案1】：

使用链接上的 data-collapse 和 data-target 属性可以在不使用额外 JS 代码的情况下执行此操作。

例如

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

Here's a working example.

【讨论】：

如何切换按钮文本以显示，例如“隐藏详细信息”，然后在单击时切换回“查看详细信息”？这个答案应该是默认设置，但是如果您有多个可以通过 relative 选择器解析的元素，设置 id="guid" 和 data-target="#guid" 会变得乏味。这不是问题，这只是一个正常的崩溃。我认为 OP 想要扩展已经存在的文本（摘录到全文扩展）编辑：我很抱歉是我想要的..不是OP :( 对于喜欢@DeanRichardson 的其他人，想要在例如之间切换按钮文本。 “查看详细信息...”和“隐藏详细信息...”参见***.com/a/28500651/245602 其实IE11只会展开，不会塌陷。【参考方案2】：

基于the 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');
);

Working demo.

【讨论】：

短小精悍，甚至可以在一个组中添加多个可折叠项目，很好的答案。对于 IE11，它只会展开，但不会折叠。演示无法为我做任何事情。我在 Mac 上使用 Chrome 版本 71.0.3578.98（官方构建）（64 位）。【参考方案3】：

详细说明 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 »';

Here is his modified example

【讨论】：

虽然有用，但它不允许 i18n 移植，这是内容不应属于 CSS 的原因之一。无论如何，为此 +1。如果 css 是同一文件上的一个块，或者如果您正在预处理 CSS（以呈现 Compass/Sass、缩小或类似任务）【参考方案4】：

我想要一个带有加号和减号按钮的“展开/折叠”容器来打开和关闭它。这使用标准引导事件并具有动画。这是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

【讨论】：

【参考方案5】：

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

【讨论】：

以上是关于Twitter Bootstrap 按钮单击以切换按钮上方的展开/折叠文本部分的主要内容，如果未能解决你的问题，请参考以下文章

Twitter bootstrap 崩溃：更改切换按钮的显示

使用 Twitter Bootstrap 切换单选按钮，获取表单输入的简洁方式是啥？

如何在悬停而不是单击时制作 Twitter Bootstrap 的“拆分按钮下拉菜单”下拉菜单？

Bootstrap轮播图的切换按钮如何制作？

如何使 Twitter Bootstrap 按钮组与 AngularJS 一起工作？

如何在页面加载后启动 Bootstrap 切换按钮，如果打开则不调用回调