Javascript Twitter Bootstrap 按钮单击以切换按钮上方的展开/折叠文本部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11968072/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap button click to toggle expand/collapse text section above button
提问by Homunculus Reticulli
I have recently come accross bootstrap and I am working on extending the hero example. I want to add the following behaviour to my page:
我最近来到了引导程序，我正在扩展英雄示例。我想将以下行为添加到我的页面：
When a button (i.e. an element with selector '.row .btn') is clicked on, I want to be able to toggle between expanding/collapsing the portion of text above the button.
单击按钮（即带有选择器“.row .btn”的元素）时，我希望能够在按钮上方的文本部分展开/折叠之间切换。
This is what the HTML looks like:
这是 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>
I can hack this using jQuery, but maybe there is a way of doing it the Bootstrap way? - i.e. using the Bootstrap API?
我可以使用 jQuery 来破解它，但也许有一种方法可以通过 Bootstrap 方式来实现？- 即使用 Bootstrap API？
回答by Taylor Gautier
It's possible to do this without using extra JS code using the data-collapse and data-target attributes on the a link.
可以使用链接上的 data-collapse 和 data-target 属性在不使用额外的 JS 代码的情况下做到这一点。
e.g.
例如
<a class="btn" data-toggle="collapse" data-target="#viewdetails">View details »</a>
回答by Sherbrow
Based on 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');
});
工作演示。
回答by Giovanni Silveira
Elaborating a bit more on Taylor Gautier's reply (sorry, I dont have enough reputation to add a comment), I'd reply to Dean Richardson on how to do what he wanted, without any additional JS code. Pure CSS.
详细说明 Taylor Gautier 的回复（抱歉，我没有足够的声誉来添加评论），我会回复 Dean Richardson 关于如何做他想做的事情，而不需要任何额外的 JS 代码。纯 CSS。
You would replace his .btnwith the following:
你可以用.btn以下内容替换他的：
<a class="btn showdetails" data-toggle="collapse" data-target="#viewdetails"></a>
And add a small CSS for when the content is displayed:
并在显示内容时添加一个小的 CSS：
.in.collapse+a.btn.showdetails:before {
content:'Hide details ?';
}
.collapse+a.btn.showdetails:before {
content:'Show details ?';
}
回答by Jess
I wanted an "expand/collapse" container with a plus and minus button to open and close it. This uses the standard bootstrap event and has animation. This is BS3.
我想要一个带有加号和减号按钮的“展开/折叠”容器来打开和关闭它。这使用标准引导程序事件并具有动画。这是BS3。
HTML:
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:
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');
})
})
Example:
例子：
回答by CMS
html:
html：
<h4 data-toggle-selector="#me">toggle</h4>
<div id="me">content here</div>
js:
js：
$(function () {
$('[data-toggle-selector]').on('click',function () {
$($(this).data('toggle-selector')).toggle(300);
})
})
