Twitter Bootstrap按钮单击以切换按钮上方的展开/折叠文本部分
Hom*_*lli 66 javascript css jquery twitter-bootstrap
我最近来到了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？
Tay*_*ier 152
使用链接上的data-collapse和data-target属性,可以在不使用额外JS代码的情况下执行此操作.
例如
<a class="btn" data-toggle="collapse" data-target="#viewdetails">View details »</a>
- 如何切换按钮文本,例如"隐藏详细信息",然后在单击时切换回"查看详细信息"？ (6认同)
- 这个答案应该是默认设置,但如果你有几个可以通过_relative_选择器解析的元素,那么设置`id ="guid"和`data-target ="#guid"`就变得很繁琐了. (3认同)
She*_*row 70
基于文档
<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');
});
工作演示.
Gio*_*ira 29
再详细说明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 »';
}
- 虽然有用,但这不允许i18n,这是内容不属于CSS的原因之一.在任何情况下,+1为此. (3认同)
Jes*_*ess 11
我想要一个带有加号和减号按钮的"展开/折叠"容器来打开和关闭它.这使用标准的bootstrap事件并具有动画.这是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