为什么一些“崩溃”元素不能正常工作？

问题描述 投票：0回答：2

我有8个Bootstrap 4'“手风琴”或折叠我的页面中的项目。前四个工作都很好。然而，当我到达第五天时，事情变得有点疯狂。我读过其他帖子，提到了一个名为transition.js的JS文件，但是从我在Bootstrap的文档中读到的内容，我不需要它。

这就是我写1手风琴的方式。我做的是复制/粘贴明显改变ID：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- ACCORDION 1 -->
<div class="card">
  <div class="card-header accordion-card-header card-faq" id="headingOne">
    <h5 class="mb-0">
      <button class="btn btn-link btn-link-questions" type="button" data- 
      toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria- 
      controls="collapseOne">
      Accordion 01
      </button>
    </h5>
  </div>

  <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" 
  data-parent="#accordionExample">
    <div class="card-body card-body-question">
      Accordion 01 response
    </div>
  </div>
</div>
<!-- /ACCORDION 1 -->


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

https://jsfiddle.net/pmourad84/dps9whk5/

html5 css3 bootstrap-4 collapse
2个回答
0
投票

目前还不是很清楚“事情变得有点疯狂”是什么意思。但是从你的jsfiddle链接我明白你的最后4/5手风琴项目表现不正常。打开一个项目应该关闭所有其他项目，这不是最后4/5手风琴的情况。

你的HTML有缺陷。所有手风琴项目都应该在“data-parent”中使用的单个div中。对于你的情况是“accordionExample”。最后5个手风琴是在这个父div之外导致了这个问题。

这是正确的标记：

<!-- Accordion FAQ Questions -->
<div class="row">
  <div class="col-12">
    <div class="col-lg-10 col-md-12 col-sm-12 col-xs-12 col-12 mx-auto accordion-wrapper">
      <div class="accordion" id="accordionExample">
        <!-- Accordion 1 -->
        <div class="card">
          <div class="card-header accordion-card-header card-faq" id="headingOne">
            <h5 class="mb-0">
              <button class="btn btn-link btn-link-questions" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> ¿Publicar en Reebit es gratuito? </button>
            </h5>
          </div>
          <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="card-body card-body-question"> Si, es gratuito. No te cobramos por publicar tus productos. </div>
          </div>
        </div>
        <!-- Accordion 2 -->
        <div class="card">
          <div class="card-header accordion-card-header" id="headingTwo">
            <h5 class="mb-0">
              <button class="btn btn-link collapsed btn-link-questions" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> ¿Puedo publicar más de un producto? </button>
            </h5>
          </div>
          <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
            <div class="card-body card-body-question"> Si, puedes publicar más de un producto. Te invitamos a publicar todos los que quieres. Solamente acuérdate que no puedes publicar el mismo producto más de una vez. </div>
          </div>
        </div>
        <!-- Accordion 3 -->
        <div class="card">
          <div class="card-header accordion-card-header" id="headingThree">
            <h5 class="mb-0">
              <button class="btn btn-link collapsed btn-link-questions" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> ¿Debo tener una cuenta en Reebit para publicar un anuncio? </button>
            </h5>
          </div>
          <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
            <div class="card-body card-body-question"> Si, debes tener una cuenta en Reebit para publicar y/o arrendar un producto en Reebit. </div>
          </div>
        </div>
        <!-- Accordion 4 -->
        <div class="card">
          <div class="card-header accordion-card-header" id="headingFour">
            <h5 class="mb-0">
              <button class="btn btn-link collapsed btn-link-questions" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> ¿Debo tener una cuenta en Reebit para arrendar un producto? </button>
            </h5>
          </div>
          <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
            <div class="card-body card-body-question"> Si, debes tener una cuenta en Reebit para publicar y/o arrendar un producto en Reebit. </div>
          </div>
        </div>
        <!-- Accordion 5 -->
        <div class="card">
          <div class="card-header accordion-card-header" id="headingFive">
            <h5 class="mb-0">
              <button class="btn btn-link collapsed btn-link-questions" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> ¿Qué es el contrato de arriendo de Reebit y cómo funciona? </button>
            </h5>
          </div>
          <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
            <div class="card-body card-body-question"> El contrato de arriendo que ofrecemos en Reebit es un documento <strong>sin validez legal</strong> que recomendamos completar junto con el arrendador o arrendatario para que ambas partes tengan la misma información sobre el arriendo y los acuerdos a los que llegaron. Si quieres que este documento tenga validez legal, ambas partes deben <strong>firmarlo ante notario</strong>. Es importante destacar que <strong>Reebit no tiene ninguna participación en el arriendo ni en ninguna transacción que las partes realicen.</strong> Nosotros te ofrecemos la plataforma para que tu producto sea visto por potenciales arrendadores. Puedes leer nuestros <a href="terminos.html" target="_blank">términos y condiciones</a> para más información. </div>
          </div>
        </div>
        <!-- Accordion 6 -->
        <div class="card">
          <div class="card-header accordion-card-header" id="headingSix">
            <h5 class="mb-0">
              <button class="btn btn-link collapsed btn-link-questions" type="button" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix"> ¿Cuándo tendré los datos del arrendador o arrendatario? </button>
            </h5>
          </div>
          <div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#accordionExample">
            <div class="card-body card-body-question"> Entregaremos los datos tanto del arrendador como arrendatario una vez que que el arrendador acepte la solicitud de arriendo. Enviaremos un correo a ambas partes con un link en el cuál podrán ver los datos del arrendador o arrendatario. </div>
          </div>
        </div>
        <!-- Accordion 7 -->
        <div class="card">
          <div class="card-header accordion-card-header" id="headingSeven">
            <h5 class="mb-0">
              <button class="btn btn-link collapsed btn-link-questions" type="button" data-toggle="collapse" data-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven"> ¿Soy arrendador o arrendatario? </button>
            </h5>
          </div>
          <div id="collapseSeven" class="collapse" aria-labelledby="headingSeven" data-parent="#accordionExample">
            <div class="card-body card-body-question"> Si estás publicando un producto eres el arrendador. Si quieres arrendar un producto publicado, entonces eres el arrendatario. </div>
          </div>
        </div>
        <!-- Accordion 8 -->
        <div class="card">
          <div class="card-header accordion-card-header" id="headingEight">
            <h5 class="mb-0">
              <button class="btn btn-link collapsed btn-link-questions" type="button" data-toggle="collapse" data-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight"> Soy una empresa. ¿Puedo publicar mis productos? </button>
            </h5>
          </div>
          <div id="collapseEight" class="collapse" aria-labelledby="headingEight" data-parent="#accordionExample">
            <div class="card-body card-body-question"> Si, puedes. Si eres una empresa, pyme o startup, también puedes publicar tus productos en Reebit; siempre y cuando tus productos cumplan con nuestras <strong>Políticas de Publicación</strong> que puedes encontrar en nuestros <a href="terminos.html" target="_blank">términos y condiciones</a>. </div>
          </div>
        </div>
      </div>
      <!-- /// Accordions -->
    </div>
  </div>
</div>
<!-- /Accordion FAQ Questions -->
0
投票
<!-- ACCORDION 1 There is data parent of div is missing in your code -->





<div id="accordion">
    <div class="card">
        <div class="card-header accordion-card-header card-faq" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link btn-link-questions collapsed" data-toggle="collapse"
                    data-target="#collapseOne" aria-expanded="true" aria- controls="collapseOne">
                    Accordion 01
                </button>
            </h5>
        </div>

        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body card-body-question">
                Accordion 01 response
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header" id="headingTwo">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"
                    aria-expanded="false" aria-controls="collapseTwo">
                    Collapsible Group Item #2
                </button>
            </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
            <div class="card-body">
                Anim ABCD 3345
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingThree">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree"
                    aria-expanded="false" aria-controls="collapseThree">
                    Collapsible Group Item #3
                </button>
            </h5>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
            <div class="card-body">
                ABCD EFGH
            </div>
        </div>
    </div>
</div>
<!-- /ACCORDION 1 -->


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.