accordion 相关问题

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

在我的应用程序中，扩展箭头必须位于面板的左侧。 但是，默认情况下它显示在右侧。 这 ： 在我的应用程序中，扩展箭头必须位于面板的左侧。 但是，默认情况下它显示在右侧。 这个： <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'， 项目：[...

怎么办？单击手风琴项目 -> 滚动到活动项目的顶部

我创建了一个手风琴，目前一次只能打开一个面板。但是，当我单击它时，我无法让它滚动到面板的手风琴。 我应该如何修改我的代码以单击...

我用html、css和js制作了一个手风琴。这个手风琴可以工作，但我的问题是它的动画

/*用按钮滚动*/ 让当前容器= 1； 常量总容器= 4； 函数scrollToContainer(containerIndex) { const container = document.getElementById(`box${containerIndex}`)...

防止在 Bootstrap Accordion php 中循环相同的值

我想以手风琴形式显示数据。问题是，当代码运行时，手风琴会根据循环 foreach 中的行以多个方式显示。我想要的输出只是折叠 2 但代码的输出

为什么我的 Bootstrap 手风琴在 Angular 应用程序中无法展开/折叠？

我使用 Bootstrap 创建了一个 Accordion Angular 组件。然而，折叠和扩展不起作用。我刚刚将引导代码复制到我的 手风琴.component.html 我使用 Bootstrap 创建了一个 Accordion Angular 组件。然而，折叠和扩展不起作用。我刚刚将引导代码复制到我的 accordion.component.html <div class="accordion accordion-flush col-md-3" id="accordionFlushExample"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne"> Accordion Item #1 </button> </h2> <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo" disabled> Accordion Item #2 </button> </h2> <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree"> Accordion Item #3 </button> </h2> <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div> </div> </div> 当我检查页面时，我看到“[webpack-dev-server] 服务器已启动：热模块替换已禁用，实时重新加载已启用，进度已禁用，覆盖已启用。”我不确定这是否是折叠/展开不起作用的原因。如果是这样，我该如何解决这个问题？ 我检查了每个 div 的 id 并确保它们相符。我还在非 Angular html 文件上测试了它并且它有效。但是，我不确定为什么我的手风琴无法在我的 Angular 应用程序中工作。 您可以将 NgBootstrap (https://ng-bootstrap.github.io/#/getting-started) 添加到您的 Angular 应用程序中并使用折叠组件 (https://ng-bootstrap.github.io/# /组件/手风琴/概述）

将手风琴与导航选项卡（Bootstrap）结合使用时出现切换问题

所以，我正在使用 Bootstrap 创建这个导航东西，它将以选项卡的形式出现在桌面上，而对于移动设备来说，它将是一个手风琴。快完成了，除了这个错误我......

手风琴风格箭头不会在 aria-expanded true 上下降

我的 html 看起来像这样 我的 html 看起来像这样 <div class="accordian-wrapper"> <div class="accordion-wrapper__title"> <div aria-expanded=true"> <div class="accordion-wrapper__title__icon-label"> <i class="accordion-wrapper__arrow"/> </div> </div> </div> </div> 如果 aria-expanded 为真，我需要将图标箭头向下移动 我试过的 .accordion-wrapper { .accordion-wrapper__title { &[aria-expanded="true"]{ .accordion-wrapper__arrow { transform: rotate(90deg); } } } } 但它不起作用。我在这里做错了什么

如何防止我的 JavaScript 手风琴将内容推到它上面？

我正在使用手风琴在我的网站上显示信息，但是当打开手风琴时，它会将上面的内容推上去。当手风琴打开时，它会上下传播，但我只想让它

如何制作可点击的垂直手风琴？

我正在为我的硕士课程制作一个网站，我想制作一个垂直可点击的手风琴机制。 ideia 是单击每个部分，它会扩展更多信息。 到目前为止，我已经

如何在react,html,bootstrap中展开和折叠表格行？

我在创建滑动表时遇到问题，主要思想是当您单击按钮时，表格的一行将展开，其下方将是数据，就像手风琴一样。 常数

mui 控制的手风琴图标在点击一个特定的手风琴时发生变化

正如标题所说，我正在对一组数据进行映射，渲染多个受控的手风琴。 当我点击其中一个而不是图标时，每个手风琴都会单独打开/关闭。 当我点击 ...

手风琴在单击每个选项卡中的链接时崩溃

我在下面有这个纯 CSS 手风琴代码。它运行良好，但是当我在其中包含一个链接时，该链接并未指向 href="" 中的内容，并最终关闭了手风琴选项卡。 我有

手风琴未通过可访问性检查

我有一个使用 van11y-accessible-accordion-aria 渲染的手风琴 标记输出为： 我有一个使用 van11y-accessible-accordion-aria 渲染的手风琴 标记输出为： <div className="c-accordion__items js-accordion accordion" data-accordion-cool-selectors="1" aria-multiselectable="true" role="tablist" id="z3j2diubs8r" data-hashaccordion-id="3o3nlqickh"> <!-- note role="tablist" above --> <div className="c-accordion__item"> <h2 className="c-accordion__title accordion__title"> <button className="js-accordion__header accordion__header" role="tab" id="accordionz3j2diubs8r_tab1" aria-controls="accordionz3j2diubs8r_panel1" aria-selected="false" type="button" data-hashaccordion-id="3o3nlqickh" aria-expanded="false"> <!-- note role="tab" above --> The Why </button> </h2> <div className="c-accordion__item-components js-accordion__panel accordion__panel" role="tabpanel" aria-labelledby="accordionz3j2diubs8r_tab1" id="accordionz3j2diubs8r_panel1" data-hashaccordion-id="3o3nlqickh" aria-hidden="true"> <div className="c-accordion__item-content"> <p>Duis vel nibh at velit scelerisque suscipit. Donec vitae sapien ut libero venenatis faucibus. Quisque ut nisi. Ut non enim eleifend felis pretium feugiat. Nulla sit amet est. </p> </div> </div> </div> </div> 当我在 Chrome 中使用 Lighthouse 测试它的可访问性时，我收到了这些消息 具有 ARIA [角色] 的元素需要子元素包含特定的 [角色] 缺少部分或全部所需的子元素。 某些 ARIA 父角色必须包含特定的子角色才能执行其预期的辅助功能。了解更多。 [role]s 不包含在它们所需的父元素中 某些 ARIA 子角色必须包含在特定的父角色中才能正确执行其预期的辅助功能。了解更多。 了解更多链接转到 https://web.dev/aria-required-children 下面显示的是他们建议的代码示例。 ...这意味着有role="tablist"作为父母，然后role="tab"为孩子。 在我发布在这个问题上的代码中，与 https://web.dev/aria-required-children 中的示例相比，我似乎有正确的标记 所以我不知道为什么这没有通过可访问性检查。 role="tab" 必须是 role="tablist" 元素的直接后代（或包含在没有语义意义的元素中）。公平地说，这在 WAI-ARIA 规范中确实不清楚，但我自己之前遇到过这个问题。 （您可以使用 aria-owns 进行关联，但如果选项卡位于 tablist 元素之外，则更多） 因为你的<button>被包裹在<h2>中，这打破了模式。 我已经对其进行了测试，它似乎可以在 JAWS 和 NVDA 中工作，但为了安全起见（因为有大量的屏幕阅读器，其中一些可能不喜欢你的实现）我会做一个小调整。 删除 <h2> 周围的 <button> 是一个选项，可能是我推荐的选项。无论如何，在小部件上有多个 <h2> 元素没有多大意义，您应该在为该部分创建的选项卡上方使用标题。 第二个选项是使 <h2> 功能像一个按钮，但这意味着添加您自己的事件处理程序、焦点指示器和 tabindex="0" 以使其可聚焦。这样您就可以将 role="tab" 移动到 <h2> 本身，这会删除语义但保留在屏幕阅读器中导航到它的能力。 我个人不喜欢第二种选择，但我明白为什么有些人会选择这样做。 我建议的另一件事是将tabs和tabpanel放在<ul>和<li>中。 对于不支持tablist的屏幕阅读器，这意味着用户仍然会收到“3个选项中的1个”等的通知。因此更容易理解他们有选项。 还建议每个 tabpanel 都有一个 tabindex="0" 以在选择选项卡后帮助导航。这是鼓励使非交互式元素可聚焦的非常罕见的情况之一。 您可能会发现 此 W3 选项卡最佳实践页面 很有用。 我有类似的问题， 我在桌面上的谷歌速度、可访问性上发现了它 https://pagespeed.web.dev/analysis/https-www-antena24-ro/3lwpxopnlp?form_factor=desktop “要求子元素包含特定元素 [角色] 的 ARIA 角色 [角色] 的元素缺少一个或所有必需的子元素。” “列表元素（）不包含在父元素中，或者。” Web siteul este aici <?php defined( 'ABSPATH' ) || exit; // Exit if accessed directly // Header Layout $header_layout = tie_get_option( 'header_layout', 3 ); if( tie_get_option( 'main_nav' ) || $header_layout == 1 || $header_layout == 4 ): $main_menu_class = 'main-nav header-nav'; // Live Search skin $live_search_data_skin = ''; if( tie_get_option( 'main-nav-components_search' ) && tie_get_option( 'main-nav-components_live_search' ) ){ $main_menu_class .= ' live-search-parent'; $live_search_data_skin = 'data-skin="search-in-main-nav"'; } // Header Layout $logo_width = ''; $line_height = ''; if( $header_layout == 1 || $header_layout == 4 ){ $logo_args = tie_logo_args(); extract( $logo_args ); $logo_margin_top = ! empty( $logo_margin_top ) ? $logo_margin_top : 20; // Default value in the CSS file $logo_margin_bottom = ! empty( $logo_margin_bottom ) ? $logo_margin_bottom : 20; // Default value in the CSS file $logo_width = ( $logo_type == 'logo' ) ? 'style="width:' . intval( $logo_width ). 'px"' : ''; $logo_height = ( $logo_type == 'logo' ) ? $logo_height : 49; $line_height = 'style="line-height:' . intval( $logo_height + $logo_margin_top + $logo_margin_bottom ). 'px"'; } ?> <div class="main-nav-wrapper"> <nav id="main-nav" <?php echo ( $live_search_data_skin ); ?> class="<?php echo esc_attr( $main_menu_class ) ?>" <?php echo ( $line_height ) ?> aria-label="<?php esc_html_e( 'Primary Navigation', TIELABS_TEXTDOMAIN ); ?>"> <div class="container"> <div class="main-menu-wrapper"> <?php if( $header_layout == 1 || $header_layout == 4 ){ do_action( 'TieLabs/Logo/before' ); ?> <div class="header-layout-1-logo" <?php echo ( $logo_width ) ?>> <?php tie_logo(); ?> </div> <?php do_action( 'TieLabs/Logo/after' ); } ?> <div id="menu-components-wrap"> <?php // Sticky Menu Logo tie_sticky_logo(); ?> <div class="main-menu main-menu-wrap tie-alignleft"> <?php $custom_menu = tie_get_object_option( false, 'cat_menu', 'tie_menu' ); $menu_args = array( 'menu' => $custom_menu, 'container_id' => 'main-nav-menu', 'container_class' => 'main-menu header-menu', 'theme_location' => 'primary', 'fallback_cb' => false, 'items_wrap' => '<ul id="%1$s" class="%2$s" role="menubar">%3$s</ul>', ); if( ! tie_get_option( 'disable_mega_menu' ) ){ $menu_args['walker'] = new TIELABS_MEGA_MENU(); } wp_nav_menu( $menu_args ); ?> </div> <?php do_action( 'TieLabs/after_main_menu' ); // Get components template TIELABS_HELPER::get_template_part( 'templates/header/components', '', array( 'components_id' => 'main-nav' ) ); do_action( 'TieLabs/after_main_components' ); ?> </div> </div> </div> </nav> </div> <?php endif; ?>

How to make accordion (mui) work with dndKit in react.js

我有一个问题，我有一个手风琴组件，里面有子手风琴，里面有文本。我需要让每个手风琴在各自的区域内可排序。该...

如何（重新）初始化手风琴项目中的 flickity 轮播？

我正试图让一个 flickity carousel 在我的每个手风琴项目中工作，不幸的是，我对 js 知识的缺乏让我陷入了死胡同。 发生的事情是我看到我的旋转木马坏了（不是

为什么每次我在 SPFx 中输入时我的页面都会滚动？

我正在研究 SPFx React 功能组件。我创建了一个包含许多手风琴的组件 每个手风琴都包含一个文本框。每次我在输入中输入任何内容时...

一些 Bootstrap 元素在 Angular 项目中不起作用

我正在使用 Bootstrap 和 Angular 开发一个项目，但它运行不正常。某些元素（如下拉菜单、手风琴等）无法正常工作。 这有点奇怪，因为在一个单独的 HTML 文件中......

尝试在 Bootstrap Accordion header 中添加 Select 标签，但无法停止传播

我正在尝试在 bootstrap 手风琴标头中添加 Select 标记，但是当我尝试从 select Tag 手风琴切换中选择选项时，当我添加停止传播以通过 jQuery 选择它时，它无法正常工作...

如何在 Bootstrap 中的页面刷新时保持当前手风琴处于活动状态

我有以下手风琴代码。代码工作正常。我想在页面刷新时使选定的选项卡保持活动状态。但是我添加的 javascript 不起作用。我不知道什么是...