bootstraps 4 błędach: Collapse jest przejście

Question

może ktoś mi pomóc proszę slove problem przejściowy bootstrap 4. to błędy spowodowane Uncaught Błąd: Collapse jest przejście problem jest tylko wtedy, gdy nie obejmują bootstrap css. w moim przypadku bootstrap css powoduje konflikt z moim dużym css. może ktoś pomóc slove z tego piekła

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script> 
 

 
<div id="accordion" role="tablist" aria-multiselectable="true"> 
 
    <div class="card"> 
 
    <div class="card-header" role="tab" id="headingOne"> 
 
     <h5 class="mb-0"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 
      Collapsible Group Item #1 
 
     </a> 
 
     </h5> 
 
    </div> 
 

 
    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne"> 
 
     <div class="card-block"> 
 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
    <div class="card-header" role="tab" id="headingTwo"> 
 
     <h5 class="mb-0"> 
 
     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
      Collapsible Group Item #2 
 
     </a> 
 
     </h5> 
 
    </div> 
 
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
     <div class="card-block"> 
 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Collapse div za pomocą następującego kodu:

$(".header").click(function() { 

    $header = $(this); 
    //getting the next element 
    $content = $header.next(); 
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown. 
    $content.slideToggle(500, function() { 
     //execute this after slideToggle is done 
     //change text of header based on visibility of content div 
     $header.text(function() { 
      //change text based on condition 
      return $content.is(":visible") ? "Collapse" : "Expand"; 
     }); 
    }); 

}); 

Sprawdź tę FIDDLE.

Answer 2

Ten problem został rozwiązany w wersji Bootstrap 4.0.0. Wersja 4.0.0 jest już dostępna!

Istnieje kilka sposobów, aby go pobrać:

• Download the latest release in a zip file.
• sklonować repo: git clone https://github.com/twbs/bootstrap.git
• Instalacja z npm: npm install bootstrap
• Instalacja z yarn: yarn add bootstrap@4.0.0
• Instalacja z Composer: composer require twbs/bootstrap:4.0.0
• Instalacja z NuGet: CSS: Install-Package bootstrap Sass: Install-Package bootstrap.sass

Można zobaczyć link Beta 1 ship list #21568 aby uzyskać więcej informacji.

---

PIERWSZE ODPOWIEDŹ

wystąpił błąd z Bootstrapv4.0.0-alpha.6 wersji z przejściem, które zostaną rozwiązane w następnej wersji.

Aby uzyskać więcej informacji, zobacz łącza issue 22256, i v4.0.0-beta milestone.

Do tej pory można użyć obejść, takiej jak przykład @Nayana_Das.