html - Bootstrap 3，切换折叠不会在页面加载时保持关闭状态

Question

我在 boostrap 3 中使用 data-toggle="collapse"但在页面加载时我隐藏的 div 内容不会保持关闭状态。我搜索了很多解决方案，但没有一个有效。下面是我的代码，为新手编码道歉，但我是个体运算符(operator)，还没有时间流利地使用 html。

<div class="row">
    <div class="container">
        <div class="col-md-12">
            <div class="thumbnail">
                <img src="img/ground/grnd1.jpg" alt="...">
  <div class="caption">

    <p style=" color: dimgray;">text here,text here,text here,text here,text here,</p>
    <p> <a class="btn btn-default" href="#foundations" data-toggle="collapse" data-target="#foundations" style="padding:2%;">Continue Reading &raquo;</a></p>
  </div>

      <div class="container" >
                    <div class="collaspe" id="foundations" data-toggle="false">
                    <br><br>
                <div class="col-md-12 col-sm-12">
                    <h1 style=" color: dimgray; font-weight:300; margin-top:5%;">Pad Foundations</h1>
                <br><br>
                    <img src="img/ground/grnd2.jpg" alt="..." style="width:100%;">
                     <p style=" color: dimgray;">text here, text here, text here, text here, </p><br><br>

                     <h1 style=" color: dimgray; font-weight:300; margin-top:5%;">Jack Pad Foundations</h1>
                     <img src="img/ground/grnd5.jpg" alt="..."  style="width:100%;">
                     <p style=" color: dimgray;">text here,text here,text   here,text here,</p><br><h2 style="font-weight: 300">Need advice?<a    href="contact_us.html">Contact us</a></h2><br><br>                   
  </div> 
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

提前致谢

Answer 1

您拼错了 ID 为“foundations”的 div 的“collapse”类名。

<div class="row">
    <div class="container">
        <div class="col-md-12">
            <div class="thumbnail">
                <img src="img/ground/grnd1.jpg" alt="...">
                <div class="caption">

                    <p style=" color: dimgray;">text here,text here,text here,text here,text here,</p>
                    <p> <a class="btn btn-default" href="#foundations" data-toggle="collapse" data-target="#foundations" style="padding:2%;">Continue Reading &raquo;</a>
                    </p>
                </div>

                <div class="container">
                    <div class="collapse" id="foundations" data-toggle="false">
                        <br>
                        <br>
                        <div class="col-md-12 col-sm-12">
                            <h1 style=" color: dimgray; font-weight:300; margin-top:5%;">Pad Foundations</h1>
                            <br>
                            <br>
                            <img src="img/ground/grnd2.jpg" alt="..." style="width:100%;">
                            <p style=" color: dimgray;">text here, text here, text here, text here, </p>
                            <br>
                            <br>

                            <h1 style=" color: dimgray; font-weight:300; margin-top:5%;">Jack Pad Foundations</h1>
                            <img src="img/ground/grnd5.jpg" alt="..." style="width:100%;">
                            <p style=" color: dimgray;">text here,text here,text here,text here,</p>
                            <br>
                            <h2 style="font-weight: 300">Need advice?<a    href="contact_us.html">Contact us</a></h2>
                            <br>
                            <br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>