使用bootstraps数据切换首先确保您已经包含了适当的脚本和css,通常这4个应该位于您的标题中,如果its not included 已经
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
然后,您可以将正确的类添加到所讨论的图像/div中,如下所示:
<div class="container">
<h2>Simple Collapsible (click image)</h2>
<img src="http://everestabercorn.com/wp-content/uploads/2016/03/9W4A4758.jpg" width="500px" class="btn btn-info" data-toggle="collapse" data-target="#demo">
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
你可以在这里看到它的实际效果。我做了一个快速演示:
Simple Collapsible Div