gpt4 book ai didi

javascript - Twitter Bootstrap 按钮单击以切换按钮上方的展开/折叠文本部分

转载 作者:IT王子 更新时间:2023-10-29 02:51:50 25 4
gpt4 key购买 nike

我最近接触了 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 &raquo;</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 &raquo;</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?

最佳答案

使用链接上的 data-collapse 和 data-target 属性,无需使用额外的 JS 代码就可以做到这一点。

例如

<a class="btn" data-toggle="collapse" data-target="#viewdetails">View details &raquo;</a>

Here's a working example .

关于javascript - Twitter Bootstrap 按钮单击以切换按钮上方的展开/折叠文本部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11968072/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com