Question

我希望每页上都有几张可折叠/可折叠的卡片。我已经看到，当您没有Jquery时会发生此问题，但是我将其链接了，并且它也超出了我的引导程序。我想念什么？

<body>
<div class="container">
    <h1 class="text-center">Woodworking Guide</h1>
    <p class="page-description"></p>
</div>

<div class="container" id="wwg-accordian">

    <div class="card">

        <div class="card-header" id="typesofwood-heading">
            <h2>
                <a data-toggle="collapse" data-parent="wwg-accordian" href="#types-of-wood">Types of Wood</a>
            </h2>
        </div><!--card header-->

        <div class="collapse show" id="types-of-wood">
            <div class="card-block">
                <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, bu</p>
            </div>
        </div>
    </div><!--card-->
</div><!--container-->

</body>
<footer>

</footer>
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/index.js"></script>
</html>

Answer 1

这是您犯错的地方：data-parent="wwg-accordian"
将其更改为：data-parent="#wwg-accordian"

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<body>
  <div class="container">
    <h1 class="text-center">Woodworking Guide</h1>
    <p class="page-description"></p>
  </div>

  <div class="container" id="wwg-accordian">

    <div class="card">

      <div class="card-header" id="typesofwood-heading">
        <h2>
          <a data-toggle="collapse" data-parent="#wwg-accordian" href="#types-of-wood">Types of Wood</a>
        </h2>
      </div>
      <!--card header-->

      <div class="collapse show" id="types-of-wood">
        <div class="card-block">
          <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, bu</p>
        </div>
      </div>
    </div>
    <!--card-->
  </div>
  <!--container-->

</body>

引导卡崩溃不起作用

1 个答案: