Twitter Bootstrapbutton单击以切换展开/折叠button上方的文本部分
我最近来了引导，我正在扩大英雄的例子。 我想将以下行为添加到我的页面：
当点击一个button（即带有select器“.row .btn”的元素）时，我希望能够在展开/折叠button上方的文本部分之间进行切换。
这是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 »</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 »</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？
基于文档
<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 »</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'); });
工作演示 。
可以在不使用额外JS代码的情况下使用链接上的data-collapse和data-target属性。
例如
<a class="btn" data-toggle="collapse" data-target="#viewdetails">View details »</a>
这是一个工作的例子 。
在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 »'; }
这是他的修改的例子
我想要一个带有加号和减号button的“展开/折叠”容器来打开和closures它。 这使用标准的引导程序事件并具有animation。 这是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'); }) })
例：
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); }) })
