我最近遇到了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?
发布于 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');
});
发布于 2012-12-07 03:29:04
可以在不使用额外JS代码的情况下,使用链接上的数据折叠和数据目标属性来实现这一点。
例如:
<a class="btn" data-toggle="collapse" data-target="#viewdetails">View details »</a>
发布于 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 »';
}
https://stackoverflow.com/questions/11968072
复制相似问题