twitter-bootstrap 引导程序 4 错误：折叠正在过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42453332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstraps 4 Error: Collapse is transitioning
提问by shivshankar
can anyone help me please to slove transition issue bootstrap 4. this is making error Uncaught Error: Collapse is transitioningissue is only when not include bootstrap css. in my case bootstrap css conflict my large css. can anyone help to slove out this hell
任何人都可以帮我解决转换问题引导程序 4。这会导致错误Uncaught Error: Collapse is transitioningissue is only when not include bootstrap 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>回答by valdeci
This issue has been solved on the Bootstrap 4.0.0-beta. The 4.2.1 version is available now!
此问题已在 Bootstrap 4.0.0-beta 上解决。4.2.1 版本现已推出！
There are several ways to download it:
有以下几种下载方式：
- Download the latest release in a zip file.
- Clone the repo:
git clone https://github.com/twbs/bootstrap.git - Install with npm:
npm install bootstrap - Install with yarn:
yarn add [email protected] - Install with Composer:
composer require twbs/bootstrap:4.2.1 - Install with NuGet: CSS:
Install-Package bootstrapSass:Install-Package bootstrap.sass
- 下载 zip 文件中的最新版本。
- 克隆回购：
git clone https://github.com/twbs/bootstrap.git - 使用npm安装：
npm install bootstrap - 用纱线安装：
yarn add [email protected] - 使用Composer安装：
composer require twbs/bootstrap:4.2.1 - 使用NuGet安装：CSS：
Install-Package bootstrapSass：Install-Package bootstrap.sass
You can see the Beta 1 ship list #21568link for more information.
您可以查看Beta 1 船舶列表 #21568链接以获取更多信息。
INITIAL ANSWER
初步答复
There is an error with the Bootstrapv4.0.0-alpha.6version with the transitioning that will be solved on the next release.
Bootstrapv4.0.0-alpha.6版本有一个错误，转换将在下一个版本中解决。
See the issue 22256, pull 21743and v4.0.0-beta milestonelinks for more information.
有关更多信息，请参阅问题 22256、pull 21743和v4.0.0-beta 里程碑链接。
For while, you can use workarounds like the @Nayana_Dasexample.
暂时，您可以使用诸如@Nayana_Das示例之类的变通方法。
回答by Nayana_Das
Collapse div using following code:
使用以下代码折叠 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";
});
});
});
Check out this FIDDLE.
看看这个FIDDLE。
回答by MrTopf
I recently also had the problem with an older BT project. My problem was simply that I had 2 navbars and both had the same id (as I copied the example twice).
我最近也遇到了一个较旧的 BT 项目的问题。我的问题很简单，我有 2 个导航栏，并且都具有相同的 ID（因为我复制了两次示例）。
This does not seem to be the case here but I thought I mention it as somebody else might come across this question and has the same issue.
这似乎不是这里的情况，但我想我提到它是因为其他人可能会遇到这个问题并且有同样的问题。
回答by uniqueNt
I have faced same problem and accidentally came up with a solution.
我遇到了同样的问题，并意外地想出了一个解决方案。
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="padding: 10px;">
<a data-toggle="collapse" href="#collapse1">Inbox</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" style="display: hidden;">
<ul class="list-group">
</ul>
<!--<div class="panel-footer">Footer</div>-->
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<!--<div class="panel-footer">Footer</div>-->
</div>
</div>
</div>
In the above Code I have to collapse id -> #collapse1And Accidentally I created two div and when I reloaded my page the second one was working fine, and first one opened but was not closing and giving the error of transitioning. So I just deleted the content of first #collapse1and keep it empty and the second one is working fine.
I also tried other options such as updating Bootstrap version or changing the place of div, none of them worked. I hope this helps.
在上面的代码中，我必须折叠 id -> 不#collapse1小心我创建了两个 div，当我重新加载页面时，第二个工作正常，第一个打开但没有关闭并给出转换错误。所以我只是删除了第一个的内容#collapse1并将其保留为空，第二个工作正常。我还尝试了其他选项，例如更新 Bootstrap 版本或更改 div 的位置，但都没有奏效。我希望这有帮助。
Thank you
谢谢
