Question

所以我最近从朋友那里拿起了一个网站，我正在使用最初安装到位的原始bootstrap v3重建它。我已经将.collapse类添加到div中以将其隐藏起来直到被点击，但是当它被点击时，该框不会保持打开而只是下降然后立即返回关闭。

如果我观察使用chrome中的检查工具发生的情况的步骤，我可以看到课程开始时为“崩溃”。更改为＆＃39;崩溃＆＃39;并应用相关的CSS样式，然后完成＆＃39;崩溃＆＃39;。然而，盒子已关闭，并且“崩溃”。 class返回应用于div，即使它在＆＃39;中显示为“崩溃”。

<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

Answer 1

我将您的HTML加载到一个文件中，将CSS放入CSS中，然后链接CSS ......

我还将topstrap 3 css放在顶部，将jquery和bootstrap.js文件放在底部的脚本标签中......

我可以通过将崩溃div与容器放在一起而没有容器类来使它们崩溃。

是在底部加载了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

Bootstrap V3。折叠不停留

1 个答案: