accordion 相关问题

即使关闭，组件也会在 ng bootstrap 手风琴内初始化

我在使用 ng bootstrap 的手风琴及其内部组件时遇到问题。 我有一个 *ngFor ，对于每个索引数组，都有一个包含组件的手风琴。 问题是，即使根据...

多个手风琴独立工作，其中第一个手风琴打开

我正在使用 W3Schools 的这个手风琴模块：https://codepen.io/SupposelySam/details/oWWgqZ 它运行良好，只有当我在页面上使用其中两个时才会出现问题。他们仍然工作。只有他们

如何在没有 bootstrap 和 html 的情况下在清晰的 css 上制作手风琴？ [已关闭]

我无法在清晰的CSS上构建手风琴 我尝试了很多，但还是做不到

如何通过手风琴上的按钮控制打开 primeng 手风琴内容

我想使用放置在其自定义标题中的按钮打开 primeng 手风琴，并且如果我单击其他任何地方，我不希望打开手风琴。我正在使用 primeng 11-lts 版本，这是...

引导反应手风琴 - 通过 useState 折叠/展开

我有一个带有多个“卡片”的反应手风琴组件。 最初，第一个展开，其余部分折叠。 我想通过反应状态（useState ...

PrimeReact AccordionTab 包装在自定义组件中时不渲染

我面临的问题是，我的自定义 FilterAccordionTab 组件（扩展了 PrimeReact 的 (V8) AccordionTab）未呈现其内容。然而，当我直接使用 PrimeReact 的 AccordionTab 时...

如何在单击按钮时将 Bootstrap 4 手风琴动画化或锚定到其各自的标题？

现在我有#collapseTab2-1、#collapseTab2-2、#collapseTab2-3等多个脚本id..在单击其各自的按钮时分别实现动画/锚定到其手风琴标题...

将 AccordionItem 中的标题左对齐

我在示例应用程序中使用 Accordion 小部件（用于学习 Kivy）。 在我的 KV 代码中，我有： 手风琴： 方向：“垂直” 手风琴项目： 标题：'2024...

如何将 Bootstrap 4 导航选项卡与手风琴 show.bs 和 hide.bs 功能一起使用？

有没有一种方法，如果我单击 Maintab 2 的按钮将激活 Maintab 2 内容并显示可折叠组项目 #2 的手风琴内容。我也将在...

用于引导手风琴的CSS

所以我对 css 和 bootstrap 很陌生，并且在我的视图页面中添加了一个手风琴。我尝试过改变原来的CSS，但没有成功！ 所以我对 css 和 bootstrap 还很陌生，并且在我的视图页面中添加了一个手风琴。我尝试过改变原来的CSS，但没有成功！ <div class="accordion accordian-flush" id="accordionExample"> @foreach (var s in Model.Data) { <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse@(s.Id)" aria-expanded="false" aria-controls="collapse@(s.Id)"> @s.Name </button> </h2> <div id="collapse@(s.Id)" class="accordion-collapse collapse" data-bs-parent="#accordionExample"> <div class="accordion-body"> <p><strong>Email: </strong>@s.Email</p> <p><strong>Manager: </strong>A name</p> <p><a [email protected]("admin") class="btn-add p-0 m-0" asp-action="Details" asp-route-id="@s.Id" aria-label="see shop details">Details</a></p> </div> </div> </div> } </div> 这是我的视图页面，我将向您展示我尝试在样式表中添加的内容... .accordion{ --bs-accordion-btn-bg:#1D976C; --bs-accordion-active-bg: red; } 最后这些是我的_layout 中的链接 <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" /> <link rel="stylesheet" href="~/EmployeeEntry.Web.styles.css" asp-append-version="true" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> 我已经厌倦了观看 YouTube 教程，但它们显示了类似的内容，我只是不知道下一步该做什么！任何帮助将不胜感激 该问题可能与 bootstrap CSS 版本有关。 尝试打开 /lib/bootstrap/dist/css/bootstrap.min.css 文件并检查 Bootstrap 版本，您可能使用 Bootstrap v5.1.0 版本，如下所示： 使用以上版本时，--bs-accordion-active-bg将不起作用。 要解决此问题，您可以尝试使用 [email protected] 版本，而不是 v5.1.0 版本。 您可以修改代码如下：将 bootstrap.min.css 文件替换为最新的 bootstrap CDN 参考。 @* <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> *@ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> 并为手风琴按钮添加 collapsed 类。 <div class="accordion accordian-flush" id="accordionExample"> @foreach (var s in Model.Data) { <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse@(s.Id)" aria-expanded="false" aria-controls="collapse@(s.Id)"> @s.Name </button> </h2> <div id="collapse@(s.Id)" class="accordion-collapse collapse " data-bs-parent="#accordionExample"> <div class="accordion-body"> <p><strong>Email: </strong>@s.Email</p> <p><strong>Manager: </strong>A name</p> <p> <a [email protected]("admin") class="btn-add p-0 m-0" asp-action="Details" asp-route-id="@s.Id" aria-label="see shop details">Details</a> </p> </div> </div> </div> } </div> 结果如下：

使用“display”属性的“allow-discrete”值转换手风琴内容

我有一个手风琴，其中内容在视觉上隐藏并使用网格模板行上从 0fr 到 1fr 值的转换来显示。 它的灵感来自 Kevin Powell 在其 YouTube 频道上提出的解决方案...

是什么让我在 LocalHost 上的 React 应用程序上出现空白页面？

我创建了一个反应页面（localhost）来跟随教程，但我的网页完全是空白的。控制台显示附加的错误消息在此处输入图像描述 我添加了 “权限...

手风琴折叠的背景颜色不会重置回默认值

我对此完全摸不着头脑，所以如果这是一个简单的修复，我深表歉意。 我正在使用手风琴类别来展开和折叠部分，方法是再次单击同一部分来折叠...

react-bootstrap Accordion Body 中的垂直滚动条不可点击

我正在使用react-bootstrap 手风琴。我的其中一个项目包含一个有时相当长的列表。我将overflowY: auto 添加到样式中，以便在这些情况下添加滚动条。卷轴...

如何在滚动页面时关闭以前的手风琴并到达新的手风琴？

我使用的是手风琴材质-mui。首先，所有手风琴都打开。当我滚动页面并到达第二个手风琴时，我想关闭第一个手风琴，当我到达第三个时

嵌套手风琴似乎不遵守 `multiple=FALSE` 参数

当使用 bslib::accordion() 和 bslib::accordion_panel() 时，如下所示，我有一个带有 s （假设 s=3）面板的手风琴。我希望每个 Accordion_panels 都包含一个手风琴，它本身包含...

警告：validateDOMNesting(...)：<div>在 tbody 内使用 Accordion 时无法显示为 <tr>警告的子项

我正在使用react-bootstrap中的Accordian，我希望可以扩展表行以查看另一个表，它工作正常，但在浏览器控制台上给我警告。 我正在使用react-bootstrap中的Accordian，我希望表行可以扩展以查看另一个表，它工作正常，但在浏览器控制台上给我警告。 <div className="row me-2 ms-2"> <table className="table accordian-table table header-fixed border mt-2"> <thead> <tr> <th width="30%" className="text-center">Col 1</th> <th width="30%" className="text-center">Col 2</th> <th width="30%" className="text-center">Col 3</th> <th width="25px" className="float end"></th> </tr> </thead> <tbody className="scroll"> <Accordion activeKey={activeAccordionKey} onSelect={(selectedKey) => setActiveAccordionKey(selectedKey)} flush> { (items?.length) ? [...items].map((item, index) => { return ( <tr key={index} onClick={() => getFlows(item)}> <Accordion.Item eventKey={index}> <Accordion.Header className="main-table-content"> <td width="30%" title={item.prop1} className="text-center pt-2"> {item.prop1} </td> <td width="30%" title={item.prop2} className="text-center pt-2"> {item.onboardingInfo.prop2} </td> <td width="30%" title={item.prop3} className="text-center pt-2"> {item.onboardingInfo.prop3} </td> <td width="25px">{" "}</td> </Accordion.Header> <Accordion.Body> <table className="table" onClick={(e) => e.stopPropagation()}> <thead> <tr> <th>Flow Name</th> <th>Flow Type</th> <th>Dnid</th> <th>Ext</th> <th>Created By</th> <th>Created On</th> </tr> </thead> <tbody> { (selectedItem?.length) ? [...selectedItem.values()].map((slItem) => { return ( <tr key={slItem.flowName}> <td>{slItem.flowName}</td> <td>{slItem.flowTypeId}</td> <td>{slItem.dnid}</td> <td>{slItem.createdBy}</td> <td>{slItem.createdOn}</td> </tr> ) }) : <tr><td>No Configs Available</td></tr> } </tbody> </table> </Accordion.Body> </Accordion.Item > </tr> ) }) : <tr><td>No ItemsFound</td></tr> } </Accordion> </tbody> </table> </div> 它在浏览器控制台中向我发出以下警告： 警告：validateDOMNesting(...)：不能作为 . 的子项出现 有人可以帮我删除这个，或任何其他替代方法吗？ HTML 表格的正确结构是： <table> <tbody> // optional <tr> // row <td>anything can be here</td> <td>another cell</td> </tr> ... </tbody> </table> 因此tr（行）只能包含td（数据）元素。

无法让手风琴工作

我无法让手风琴组件工作。我的 app.module.ts 中有这个： //ng2-引导程序 从“ng2-bootstrap”导入{ AccordionModule }； @NgModule({ 声明：[...]，

Javascript Accordion 分配类单击事件

当前，当单击“accordion_container”时，类“open”被分配给“accordion_container”。到目前为止一切都很好。我想改变的只是点击...时发生这种情况

如何使用 Bootstrap 在 Django 中打开特定的 Accordion 项？

我有一个 Django 应用程序，其页面包含 Bootstrap Accordion。 我在第三个手风琴项目中有一个表格。在该表单中提交时，我希望页面刷新到相同的手风琴项目 - 我...