Question

如果我在一页中为Bootstrap可折叠系统将此代码复制了两次，则一个切换按钮将影响其他切换，导致所有内容扩展或折叠。

我将如何解决此问题？每个可折叠对象都只会影响自己的集合。

最终目标是将可折叠组件作为共享组件。因此，如果我在页面中将其复制3、4、5、100次，则其他副本不应受到影响。（稍后将使用C＃扩展方法）。

https://getbootstrap.com/docs/4.0/components/collapse/

请在页面中复制两次代码。

<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
    <!-- Accordion card -->
    <div class="card">
        <!-- Card header -->
        <div class="card-header" role="tab" id="headingOne1">
            <a data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true"
               aria-controls="collapseOne1">
                <h5 class="mb-0">
                    Collapsible Group Item #1 <i class="fas fa-angle-down rotate-icon"></i>
                </h5>
            </a>
        </div>

        <!-- Card body -->
        <div id="collapseOne1" class="collapse show" role="tabpanel" aria-labelledby="headingOne1"
             data-parent="#accordionEx">
            <div class="card-body">
                1111 test
            </div>
        </div>

    </div>
    <!-- Accordion card -->
    <!-- Accordion card -->
    <div class="card">

        <!-- Card header -->
        <div class="card-header" role="tab" id="headingTwo2">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo2"
               aria-expanded="false" aria-controls="collapseTwo2">
                <h5 class="mb-0">
                    Collapsible Group Item #2 <i class="fas fa-angle-down rotate-icon"></i>
                </h5>
            </a>
        </div>

        <!-- Card body -->
        <div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"
             data-parent="#accordionEx">
            <div class="card-body">
                2222 test
            </div>
        </div>
    </div>
    <!-- Accordion card -->
    <!-- Accordion card -->
    <div class="card">

        <!-- Card header -->
        <div class="card-header" role="tab" id="headingThree3">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseThree3"
               aria-expanded="false" aria-controls="collapseThree3">
                <h5 class="mb-0">
                    Collapsible Group Item #3 <i class="fas fa-angle-down rotate-icon"></i>
                </h5>
            </a>
        </div>

        <!-- Card body -->
        <div id="collapseThree3" class="collapse" role="tabpanel" aria-labelledby="headingThree3"
             data-parent="#accordionEx">
            <div class="card-body">
                3333 test
            </div>
        </div>

    </div>
    <!-- Accordion card -->
</div>

试图隔离行为。想避免javascript路由，但是如果需要的话。也许与每个共享相同ID，数据父级等的人有关。

Answer 1

在使用Bootstrap的Accordion时，尤其是在您仅复制卡时，请不要忘记检查卡体的id 必须是唯一的，并且卡头的href必须与之匹配。

错误 （两个卡体都具有相同的id，即collapseOne）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Body of Collapsible #1
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseOne" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Body of Collapsible #2
      </div>
    </div>
  </div>
</div>

正确 （每个卡身都有自己的id）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Body of Collapsible #1
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Body of Collapsible #2
      </div>
    </div>
  </div>
</div>

HTML CSS：一个Bootstrap可折叠功能正在影响页面上的其他功能

1 个答案: