bootstraps 4 Lỗi: Thu gọn đang chuyển

Question

bất cứ ai có thể giúp tôi xin vui lòng để slove vấn đề chuyển tiếp bootstrap 4. này đang thực hiện lỗi của router Lỗi: Thu gọn đang chuyển vấn đề là chỉ khi không bao gồm css bootstrap. trong trường hợp cst bootstrap của tôi xung đột với css lớn của tôi. bất cứ ai có thể giúp đỡ để slove ra địa ngục này

<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 sử dụng đoạn mã sau:

$(".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"; 
     }); 
    }); 

}); 

Check-out FIDDLE này.

Answer 2

Sự cố này đã được giải quyết trên Bootstrap 4.0.0-beta. Phiên bản 4.0.0 hiện đã có!

Có một số cách để tải về nó:

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

Bạn có thể thấy liên kết Beta 1 ship list #21568 để biết thêm thông tin.

---

BAN ĐẦU ĐÁP

Có một lỗi với phiên bản Bootstrapv4.0.0-alpha.6 với việc chuyển đổi có sẽ được giải quyết trên phiên bản tiếp theo.

Xem các liên kết issue 22256, pull 21743 và v4.0.0-beta milestone để biết thêm thông tin.

Trong thời gian này, bạn có thể sử dụng cách giải quyết như ví dụ @Nayana_Das.