单击后Bootstrap崩溃无法保持打开状态
[英]Bootstrap collapse doesn't stay open after clicking
问题描述
I have laravel and vue js installed and using bootstrap. 
我已经安装了laravel和vue js并使用了bootstrap。 I am trying to use bootstrap collapse. 我正在尝试使用bootstrap崩溃。 But when I click to open the collapsed item it opens for some milisecond and then disappear. 但是，当我单击以打开折叠项时，它会打开一段时间，然后消失。 Here is my code 这是我的代码
<a href="#demo" class="btn btn-info" data-toggle="collapse">Simple collapsible</a>
<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>
I tried to use $('.collapse').collapse(); 我试图使用$('.collapse').collapse(); but it doesn't make any effect if comment this line or keep it. 但如果注释此行或保留它，则不会产生任何效果。 Sane result. 赛恩结果。
Any idea what's wrong? 知道有什么问题吗？ Also there is no error in the console. 控制台中也没有错误。
Thank you 谢谢
2 个解决方案
解决方案1
2 2018-02-12 06:56:29
You have missed data-target attribute & not needed to set href tag for a tag. 您错过了数据目标属性，并且不需要为标签设置href标签。
check below snippet for working code. 检查以下代码段以获取工作代码。
<html> <head> <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> </head> <body> <div class="container"> <h2>Simple Collapsible</h2> <a class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</a> <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> </body> </html>
解决方案2
1 2019-01-23 16:47:04
Adding on to maulik's answer: 加上maulik的答案：
If you are using v4, make sure your jquery/bootstrap.min.js is the correct version. 如果使用的是v4，请确保您的jquery / bootstrap.min.js是正确的版本。
https://getbootstrap.com/docs/4.0/getting-started/introduction/#js https://getbootstrap.com/docs/4.0/getting-started/introduction/#js
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.