bootstraps 4錯誤：崩潰正在過渡

Question

任何人都可以幫助我請緩解過渡問題bootstrap 4. 這是錯誤未捕獲錯誤：崩潰正在過渡問題是隻有當不包括引導CSS。在我的情況bootstrap css衝突我的大css。任何人都可以幫上懸而未決出這個地獄

<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

使用下面的代碼崩潰的div

：

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

}); 

看看這個FIDDLE。

Answer 2

此問題已在Bootstrap 4.0.0-beta上解決。 4.0.0版本現在可用！

有幾種方法可以下載它：

• Download the latest release in a zip file.
• 克隆回購：git clone https://github.com/twbs/bootstrap.git
• 安裝與npm：npm install bootstrap
• 安裝與yarn：yarn add bootstrap@4.0.0
• 與Composer安裝：composer require twbs/bootstrap:4.0.0
• 與NuGet安裝：CSS：Install-Package bootstrap薩斯：Install-Package bootstrap.sass

你可以看到Beta 1 ship list #21568鏈接以獲取更多信息。

---

最初的回答

有一個與Bootstrapv4.0.0-alpha.6版本，將在下一版本中解決的過渡錯誤。

查看issue 22256，pull 21743和v4.0.0-beta milestone鏈接瞭解更多信息。

對於while，您可以使用變通方法，如@Nayana_Das示例。