accordion 相关问题

我尝试在 AngFor 中使用 Bootsrap 5 的手风琴，但遇到问题

... <div class="accordion w-50 mx-auto" id="accordionExample"> <div *ngFor="let note of notes; index as i;"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne "> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="'#collapse + i'" aria-expanded="true" > {{note.subject}} </button> </h2> <div id="'collapse + i'" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> {{note.text}} <div class="mt-2"> <button class="btn btn-sm btn-primary" type="button">Edit</button> <button class="btn btn-sm btn-danger ms-3" type="button">Delete</button> </div> </div> </div> </div> </div> 我想为每个元素打开一个手风琴，但所有元素都打开。我使用不同的 id 和索引，但它仍然不起作用。 如果我理解你的问题，你应该像这样更改你的代码： <div class="accordion w-50 mx-auto" id="accordionExample"> <div *ngFor="let note of notes; index as i;"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne "> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse' + i" aria-expanded="true" > {{note.subject}} </button> </h2> <div [id]="'collapse' + i" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> {{note.text}} <div class="mt-2"> <button class="btn btn-sm btn-primary" type="button">Edit</button> <button class="btn btn-sm btn-danger ms-3" type="button">Delete</button> </div> </div> </div> </div> </div> 使用 Angular 数据绑定属性，您可以正确设置 ids

如何在Javascript中为手风琴菜单添加滑动效果？

我正在创建一个手风琴菜单，单击它即可上下滑动。我能够获得该功能，但无法获得从上到下平滑滑动的动画效果......

如何修复 DisclosureGroup V 形箭头不透明度？

我目前正在 SwiftUI 中创建手风琴视图，但遇到了一个问题：DisclosureGroup 附带的默认 V 形看起来是半透明的。我尝试整合...

如何在 Angular 2.0 中以编程方式触发 PrimeNG Accordion Click？

我有一个手风琴，如下所示。 单击链接时，我需要触发所有 p-accordianTab 元素的单击事件。 这怎么可能？ {{

简单的原生 javascript 手风琴 - 单击活动项目时出现问题

我的手风琴脚本有问题。 有人可以解释一下 - 为什么单击活动项目后，动画不像单击下一个项目时那样执行？ 在我看来，

引导手风琴，单击时滚动到活动（打开）手风琴的顶部？

我正在使用 Bootstrap 制作一个响应式网站，它包含带有大量文本的手风琴，当您读到底部并单击下一个手风琴时，大量文本被折叠......

两列弹性布局中的手风琴：改变一列的高度会影响其他列

我想要两列手风琴。目前我使用弹性布局来做到这一点。但是，当在一列中展开手风琴时，它会影响另一列中的元素。我怎样才能

Web 组件 (LIT) - 手风琴在打开其他组件时关闭

我正在使用并尝试在选择另一个手风琴时关闭打开的手风琴。但无法这样做。非常感谢任何帮助。 我正在使用 并尝试在选择另一个手风琴时关闭打开的手风琴。但无法这样做。非常感谢任何帮助。 <lion-accordion> <h3 slot="invoker"> <button>Sensory Factors</button> </h3> <div slot="content" class="lion-paragraph-container"> <p> Content A </p> </div> <h3 slot="invoker"> <button>Nutritional value</button> </h3> <div slot="content"> Content B </div> </lion-accordion> 为什么要创建对 Lit 和 Lion 的依赖？ 它几乎是一个 one-liner <details-accordion> 用于原生 <details> <summary> 代码的原生 Web 组件 免费投入ctrl-click <style> summary { font-weight: bold; cursor: pointer } details[open] { background: beige } </style> <details-accordion> <details open> <summary>Summary 1</summary> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </details> <details> <summary>Summary 2</summary> "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </details> <details> <summary>Summary 3</summary> "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </details> </details-accordion> <script> customElements.define( 'details-accordion', class extends HTMLElement { connectedCallback() { this.onclick = e => [...this.children].forEach(d => !e.ctrlKey && d.toggleAttribute("open", e.target == d)); } }); </script>

突破无JS单文件多页html文件的限制

我正在构建一个多页单个 html 文件文档。 与 Android 的默认 WebView 一起使用。这意味着绝对没有 JS。 （我希望我可以使用JS，但它不支持它。我希望我可以......

Flutter 中可以更改 ExpansionTile 的高度吗？

ExpansionTile继承自ListTile，它具有固定的高度。没有图块高度的输入参数。 我尝试将 ExpansionTile 包装在具有硬编码高度的容器小部件中......

如何将项目设置为在 shadcn ui 手风琴中默认打开？

我正在使用 shadcn ui 中的手风琴，默认情况下所有手风琴项目都是折叠的。我希望第一个项目默认不折叠。如何实现这一目标？ 我尝试传递默认值...

打开手风琴菜单项时网页无法正确滚动

当我展开手风琴菜单中的项目时，页面似乎没有正确延长。它不再让我一直向上滚动。 @import url('https://fonts.googleapis.com/css2?family=Open+Sans...

即使设置为不可折叠，TitledPane 的箭头也保持可见

我正在尝试创建一个 TitledPane，一旦打开并且其中的 TextField 没有有效输入，就无法折叠它。 这种行为已经在我的代码中起作用，但是一旦...

如何关闭 p:accordionPanel 单击按钮

我用于输入地址字段。默认情况下设置 active-index="-1"，以便在加载页面时面板将关闭。用户输入详细信息后，我想要面板区域wh。 ..

手风琴组件中的 CSS 转换不起作用

我不确定 CSS 转换是否正确。我正在开发一个手风琴组件，我只想在展开和折叠状态之间平滑变化。这是代码： .手风琴{

jQuery：当我单击另一张幻灯片时，如何使已打开的手风琴幻灯片折叠？

工作codepen链接：https://codepen.io/boingloings33/pen/PoXpLWR 我有一个功能齐全的手风琴，当我单击下一张幻灯片时，我正在努力使其自动折叠打开的幻灯片。任何帮助...

侧边栏菜单中的手风琴无法使用 HTML/CSS/Javascript 正常运行

我的编码： 函数显示（）{ document.getElementById("sidebar").classList.toggle('active'); } //从 CHATGPT 复制并粘贴 //获取所有手风琴项目 const AccordionItems = 文档。

Native Base：无法创建折叠/折叠组件

我意识到 Accordion 是在旧版本的 Native 基础上使用的，但我在文档中没有看到它在新版本中不起作用的任何地方。我尝试在 React Native Expo 锅炉 p 中运行示例代码...

如何将扩展面板图标位置更改为左侧？

在我的应用程序中，扩展箭头必须位于面板的左侧。 但是，默认情况下它显示在右侧。 这 ： 在我的应用程序中，扩展箭头必须位于面板的左侧。 但是，默认情况下它显示在右侧。 这个： <ExpansionPanelSummary className={classes.panelSummary} expandIcon={<ExpandMoreIcon />} IconButtonProps={{edge: 'start'}} aria-controls='panel1a-content' id='panel1a-header' > 没成功。 当然，您无法（轻松）更改组件在 HTML 中出现的顺序。然而，有一种方法只使用 CSS。 ExpansionPanelSummary 使用 display: flex；因此，您可以在图标上设置 order 属性，使其显示在内容的左侧。 这可以通过 useStyles 或 withStyles 来实现（或者可能使用纯 CSS，但我还没有尝试过）；以下是您如何使用后者： import withStyles from "@material-ui/core/styles/withStyles"; const IconLeftExpansionPanelSummary = withStyles({ expandIcon: { order: -1 } })(ExpansionPanelSummary); 当您希望图标显示在左侧时，您可以使用 IconLeftExpansionPanelSummary 而不是 ExpansionPanelSummary 编写其余代码。不要忘记在组件上设置 IconButtonProps={{edge: 'start'}} 以确保适当的间距。 <AccordionSummary className={classes.accordionSummary} classes={{ expandIcon: classes.expandIcon, expanded: classes.expanded }} IconButtonProps={{ disableRipple: true }} ></AccordionSummary> 您可以添加类并使用flex-direction accordionSummary: { flexDirection: 'row-reverse' } 很简单 像这样在<ExpansionPanelSummary>上添加课程 <ExpansionPanelSummary className={classes.panelSummary}> 像这样在jss中针对此类添加CSS panelSummary:{flexDirection: "row-reverse"}, 如果使用CSS 像这样在<ExpansionPanelSummary>上添加课程 <ExpansionPanelSummary className="panelSummary"> 像这样在jss中针对此类添加CSS .panelSummary{flex-direction: row-reverse;} 您可以通过从 ExpandIcon 中删除它来获取左侧的扩展面板图标，并将其添加为摘要中的子项，如下所示 <ExpansionPanel defaultExpanded={true}> <ExpansionPanelSummary aria-controls="panel1a-content"> {this.state.expanded ? <RemoveIcon/> : <ExpandIcon />} <Typography component='h4' variant='h4'>My Expansion Panel</Typography> </ExpansionPanelSummary> <ExpansionPanelsDetails /> </ExpansionPanel> 挑战在于订单被硬编码到代码库中，您将无法按原样使用 ExpansionPanel。 如果你查看实现，你会发现代码如下 <div className={clsx(classes.content, { [classes.expanded]: expanded })}>{children}</div> {expandIcon && ( <IconButton disabled={disabled} className={clsx(classes.expandIcon, { [classes.expanded]: expanded, })} edge="end" component="div" tabIndex={-1} aria-hidden {...IconButtonProps} > {expandIcon} </IconButton> )} 如您所见，<div>包含文本，然后显示IconButton。 因此，您可能必须使用开箱即用的内容，或者根据材料 UI 提供的内容创建自己的组件。 希望有帮助。 您可以像这样修改 CSS 类： 注意绝对位置，这样您就可以使用“左”或“右”属性将包含图标的 div 移动到您想要的任何位置 const useStyles = makeStyles((theme) => ({ ExpansionPanelSummaryExpandedIcon: { '& div.MuiExpansionPanelSummary-expandIcon': { position: 'absolute', right: '5%', }, } })); 然后在 ExpansionPanelSummary 中使用 <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1-content" id="panel1bh-header" className={classes.ExpansionPanelSummaryExpandedIcon} > 参考资料： https://cssinjs.org/?v=v10.3.0 https://v4-8-3.material-ui.com/customization/components/#overriding-styles-with-classes 通过在 ExpansionPanelSummay 中设置 flexDirection: 'row-reverse' 我们可以通过以下方式实现相同的效果。 <Accordion> <ExpansionPanel> <ExpansionPanelSummary sx={{flexDirection: 'row-reverse'}}> // add here <Typography style={{marginLeft: '2rem'}}>Settlements</Typography> </ExpansionPanelSummary> <ExpansionPanelDetails> <Typography>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</Typography> </ExpansionPanelDetails> </ExpansionPanel> </Accordion>

手风琴主体动态内容无法正常工作 - Angular + ngbAccordion

我有一个手风琴，它循环遍历数组，并根据条件动态加载手风琴体内的内容。 项目=[ { 数据：'测试1'， 物品： [] },{ 数据：'测试2'， 项目：[...