Bootstrap 折叠

Bootstrap允许我们在不使用accordion标记和JavaScript代码的情况下扩展和折叠元素。

通过data属性扩展和折叠

将data-toggle =“collapse”添加到控制器元素(例如按钮或锚点)以及用于按钮的data-target或用于锚点的href以自动分配可折叠元素的控制。

data-target或href属性接受CSS选择器以将折叠应用于特定元素。

将类“collapse”添加到可折叠元素。如果你希望它默认打开,可添加额外的类“in”。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
p{
    background: #F9F9F9;
    border: 1px solid #E1E1E8;
    margin: 10px 0;
    padding: 8px;
}
.bs-example{
  margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
    <!-- Trigger Button HTML -->
    <input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#toggleDemo" value="Toggle Button">
    <!-- Collapsible Element HTML -->
    <div id="toggleDemo" class="collapse in"><p>This is a simple example of expanding and collapsing individual element via data attribute. Click on the <b>Toggle Button</b> button to see the effect.</p></div>
</div>
</body>
</html>

通过JavaScript扩展和折叠元素

我们可以通过JavaScript手动扩展和折叠单个元素,使用JavaScript代码中可折叠元素的“id”或“class”选择器调用collapse()方法。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".btn").click(function(){
        $("#toggleDemo").collapse("toggle");
    });
});
</script>
<style type="text/css">
p{
    background: #F9F9F9;
    border: 1px solid #E1E1E8;
    margin: 10px 0;
    padding: 8px;
}
.bs-example{
  margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
    <!-- Trigger Button HTML -->
    <input type="button" class="btn btn-primary" value="Toggle Button">
    <!-- Collapsible Element HTML -->
    <div id="toggleDemo" class="collapse in"><p>
    this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. 
    Click on the <b>Toggle Button</b> button to see the effect.</p></div>
</div>
</body>
</html>

选项

以下选项可用于折叠。

名称 类型 默认值 描述
parent 选择器 false 设置可折叠父级。
toggle boolean(布尔值) true 在调用时切换可折叠元素。

折叠的方法

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".toggle-false").click(function(){
        $("#myCollapsible").collapse({
            toggle: false
        });
    });
    $(".show-btn").click(function(){
        $("#myCollapsible").collapse("show");
    });
    $(".hide-btn").click(function(){
        $("#myCollapsible").collapse("hide");
    });
    $(".toggle-btn").click(function(){
        $("#myCollapsible").collapse("toggle");
    });
});
</script>
<style type="text/css">
p {
    background: #F9F9F9;
    border: 1px solid #E1E1E8;
    margin: 10px 0;
    padding: 8px;
}
.bs-example{
  margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
    <!-- Trigger Button HTML -->
    <input type="button" class="btn btn-primary toggle-false" value="Toggle False">
    <input type="button" class="btn btn-primary show-btn" value="Show Button">
    <input type="button" class="btn btn-primary hide-btn" value="Hide Button">
    <input type="button" class="btn btn-primary toggle-btn" value="Toggle Button">
      
    
    <!-- Collapsible Element HTML -->
    <div id="myCollapsible">
        <p>Click on the buttons to see how it works.</p>
    </div>
</div>
</body>
</html>

事件

我们可以使用折叠的以下事件。

事件 描述
show.bs.collapse 当调用show instance方法时立即触发。
shown.bs.collapse 在动画之后使折叠元素对用户可见时触发。
hide.bs.collapse 当hide方法被调用时立即触发。
hidden.bs.collapse 在动画之后使折叠元素对用户隐藏时触发。

以下示例为在可折叠元素的滑动转换已完全完成时显示日志消息。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#myCollapsible").on("hidden.bs.collapse", function(){
    console.log("Collapsible element has been completely closed.");
  });
});
</script>
<style type="text/css">
p {
  background: #F9F9F9;
  border: 1px solid #E1E1E8;
  margin: 10px 0;
  padding: 8px;
}
.bs-example{
  margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
    <!-- Trigger Button HTML -->
    <input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#myCollapsible" value="Toggle Button">
    <!-- Collapsible Element HTML -->
    <div id="myCollapsible" class="collapse in"><p>This is a simple example of hidden event. </p></div>
</div>
</body>
</html>
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部