Bootstrap V3。折叠未保持打开状态

Question

So i have recently picked up a site from a friend and i am in the process of rebuilding it using the original bootstrap v3 that was originally put in place. 因此，我最近从一个朋友那里选了一个站点，并且我正在使用最初放置的原始bootstrap v3对其进行重建。 I have added the .collapse class onto a div to hide it away until clicked but when it is clicked the box doesn't stay open just drops down and then immediately goes back to being closed. 我已将.collapse类添加到div上以将其隐藏，直到单击为止，但是单击该框时，该框不会保持打开状态，只是掉下来然后立即返回到关闭状态。

If i watch the steps of what happens using the inspect tool in chrome i can see the class starts as 'collapse' changes to 'collapsing' and applies the css styles relevant and then finishes as 'collapse in'. 如果我使用chrome中的检查工具观察发生的步骤，则可以看到该类从“折叠”更改为“折叠”开始，并应用相关的CSS样式，然后以“折叠”结束。 However the box has closed and the 'collapse' class is back to being applied to the div even though it is displaying as 'collapse in'. 但是，该框已关闭，即使它显示为“ collapse in”，“ collapse”类也将重新应用于div。

<div class="collapse" id="facebookreviews">

 <div class="row">

  <div class="col-xs-12 col-sm-4 col-md-2">
  <imgsrc="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
  </div>
  <div class="col-xs-12 col-sm-8 col-md-2">
  <p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
  <p><strong>Stacey, Shropshire</strong></p>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-2">
  <img src="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
  </div>
  <div class="col-xs-12 col-sm-8 col-md-2">
  <p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
  <p><strong>Stacey, Shropshire</strong></p>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-2">
  <img src="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
  </div>
  <div class="col-xs-12 col-sm-8 col-md-2">
  <p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
  <p><strong>Stacey, Shropshire</strong></p>
  </div>

 </div>

</div>

<div class="spacer-25">
</div>

<div class="row">
 <div class="col-xs-12 text-center">
  <button class="btn btn-black" type="button" data-toggle="collapse" data-target="#facebookreviews" aria-expanded="false" aria-controls="facebookreviews">Click to view more
  </button>
 </div>
</div>


.collapse {
display: none;

 &.in      { display: block; }

.collapsing {
 position: relative;
 height: 0;
 overflow: hidden;
 @include transition-property(height, visibility);
 @include transition-duration(.35s);
 @include transition-timing-function(ease);
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

! ！ https://i.imgur.com/veYWYoZ.png https://i.imgur.com/veYWYoZ.png

Answer 1

I loaded your HTML into a file, put the CSS in a CSS, and linked the CSS... 我将您的HTML加载到文件中，将CSS放入CSS中，然后链接了CSS ...

I also put bootstrap 3 css in at the top and jquery and bootstrap.js files in a script tag at the bottom... 我也将bootstrap 3 css放在顶部，并将jquery和bootstrap.js文件放在脚本标记的底部...

I was able to get them to collapse just fine both with putting your collapse div with a container and without a container class. 通过将折叠div放入容器和不放入容器类，我能够使它们折叠起来很好。

is jquery and bootstrap.js loaded at the bottom? 底部是否加载了jquery和bootstrap.js？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="testing.css">

</head>
<body>

<div class="container collapse" id="facebookreviews">

 <div class="row">

  <div class="col-xs-12 col-sm-4 col-md-2">
  <imgsrc="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
  </div>
  <div class="col-xs-12 col-sm-8 col-md-2">
  <p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
  <p><strong>Stacey, Shropshire</strong></p>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-2">
  <img src="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
  </div>
  <div class="col-xs-12 col-sm-8 col-md-2">
  <p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
  <p><strong>Stacey, Shropshire</strong></p>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-2">
  <img src="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
  </div>
  <div class="col-xs-12 col-sm-8 col-md-2">
  <p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
  <p><strong>Stacey, Shropshire</strong></p>
  </div>

 </div>

</div>

<div class="spacer-25">
</div>

<div class="row">
 <div class="col-xs-12 text-center">

  <button class="btn btn-black" type="button" data-toggle="collapse" data-target="#facebookreviews" aria-expanded="false" aria-controls="facebookreviews">Click to view more
  </button>
 </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
</body>
</html>

Collapse Working 收合工作

Collapse Working Pt 2 收合工作台2

Bootstrap V3。折叠未保持打开状态

问题描述

1 个解决方案

解决方案1
0 2017-09-25 14:43:24

Bootstrap V3。折叠未保持打开状态

问题描述

1 个解决方案

解决方案1 0 2017-09-25 14:43:24

解决方案1
0 2017-09-25 14:43:24