英文:
Why does Bootstrap 5's getOrCreateInstance() method for collapsibles immediately toggle the element?
问题
我到现在才开始使用Bootstrap 5中的Collapse功能，但我非常不喜欢它！
如果我有一个简单的设置，有一个可折叠元素 - 最初是隐藏的 - 和一个切换其可见性的按钮，就像这样：
<button class="btn btn-primary" id="toggleDetails">Show Details</button>
<div class="collapse border mt-2 p-2" id="details">
这里有一些信息。
</div>
还有一些类似这样的JavaScript：
const details = document.getElementById("details");
const detailsCollapse = bootstrap.Collapse.getOrCreateInstance(details);
const btn = document.getElementById("toggleDetails");
btn.addEventListener("click", (e) => {
detailsCollapse.toggle();
});
为什么getOrCreateInstance会切换可折叠元素的可见性？它的唯一工作肯定是获取折叠实例。这真的让人气愤。我做错了什么吗？如果没有，我怎样才能获得折叠实例而不切换它？显然，在我的实际代码中，设置比这复杂，但这个问题目前让我停顿不前。
这里有一个演示这个问题的fiddle。
英文:
I've not had to work with the Collapse feature in Bootstrap 5 until today and I strongly dislike it!
If I have a simple setup with a collapsible element - hidden initially - and a button to toggle its visibility, like this:
<button class="btn btn-primary" id="toggleDetails">Show Details</button>
<div class="collapse border mt-2 p-2" id="details">
Here is some information.
</div>
and some Javascript like this:
const details = document.getElementById("details");
const detailsCollapse = bootstrap.Collapse.getOrCreateInstance(details);
const btn = document.getElementById("toggleDetails");
btn.addEventListener("click", (e) => {
detailsCollapse.toggle();
});
why does the getOrCreateInstance toggle the collapsible element's visibility? Surely its only job is to get the collapse instance. It's absolutely infuriating. Am I doing something wrong? If not, how can I get the collapse instance without toggling it? Obviously in my actual code the setup is more complex than this but this issue is currently holding me up.
There's a fiddle showing the problem here.
答案1
得分: 1
添加 toggle: false 选项
默认行为是
> 在调用时切换可折叠元素。
<!-- 开始片段：js 隐藏：false 控制台：true babel: false -->
<!-- 语言: lang-js -->
const details = document.getElementById("details");
const detailsCollapse = bootstrap.Collapse.getOrCreateInstance(details, {
toggle: false
})
const btn = document.getElementById("toggleDetails");
btn.addEventListener("click", (e) => {
detailsCollapse.toggle();
});
<!-- 语言: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<button class="btn btn-primary" id="toggleDetails">Show Details</button>
<div class="collapse border mt-2 p-2" id="details">
这里有一些信息。
</div>
<!-- 结束片段 -->
英文:
Add toggle: false option
The default behavior is
> Toggles the collapsible element on invocation.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const details = document.getElementById("details");
const detailsCollapse = bootstrap.Collapse.getOrCreateInstance(details, {
toggle: false
})
const btn = document.getElementById("toggleDetails");
btn.addEventListener("click", (e) => {
detailsCollapse.toggle();
});
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<button class="btn btn-primary" id="toggleDetails">Show Details</button>
<div class="collapse border mt-2 p-2" id="details">
Here is some information.
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论