Twitter Bootstrap按钮单击以切换按钮上方的展开/折叠文本部分
Twitter Bootstrap按钮单击以切换按钮上方的展开/折叠文本部分
提问于 2012-08-15 18:54:56
我最近遇到了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 »</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？
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-08-15 19:43:56
基于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 »</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');
});Stack Overflow用户
发布于 2012-12-07 03:29:04
可以在不使用额外JS代码的情况下，使用链接上的数据折叠和数据目标属性来实现这一点。
例如：
<a class="btn" data-toggle="collapse" data-target="#viewdetails">View details »</a>Stack Overflow用户
发布于 2013-10-05 04:27:16
在详细阐述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 »';
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11968072
复制相关文章
相似问题