如何展开和折叠使用 aria-expanded 属性制作的 div？

Posted 2023-05-09

【中文标题】如何展开和折叠使用 aria-expanded 属性制作的 div？

【英文标题】：How to expand and collapse a div made using aria-expanded attribute?

【发布时间】：2021-09-13 06:17:45

【问题描述】：

我基本上是在尝试编写一个可以使用 javascript 扩展折叠的 <div> 的脚本。在使用前端部分时，我可以通过单击它来折叠和展开 <div>，但是对于 JavaScript，如果我尝试 element.click() 甚至 element.ariaExpanded = "true"，它就不起作用。

我附上点击 <div> 之前和之后的代码，突出显示代码中的差异。

我尝试了几件事，包括

var outerDiv = document.getElementsByClassName("section--section--BukKG");
outerDiv[0].ariaExpanded = "true";
outerDiv[0].children[0].ariaExpanded = "true";
outerDiv[0].click();
document.querySelectorAll('.section--section-chevron--tJ4mD')[0].classList.remove('udi-angle-down');
document.querySelectorAll('.section--section-chevron--tJ4mD')[0].classList.add('udi-angle-up');

【问题讨论】：

根据MDN "The ariaExpanded property of the Element interface reflects the value of the aria-expanded attribute, which indicates whether a grouping element owned or controlled by this element is expanded or collapsed." - 我不相信这会修改元素本身的状态

【参考方案1】：

由于您没有包含任何 html 标记，因此以下是原始的粗略复制。您实际上是在尝试切换 DIV 元素的可见性，并使用 ARIA 标签指示该元素是否为expanded

为此，您可以使用 CSS 中的 aria-expanded 属性来控制父容器中子对象的可见性。通过将属性 aria-expanded 设置为 true 或 false 将调用相关的 css 规则来显示/隐藏子项。

const bool=(v)=>v=='true' ? true : false;

const clickhandler=function(e)
  this.setAttribute('aria-expanded', !bool(this.ariaExpanded) )


document.querySelectorAll('div.section--section--bukkg').forEach(div=>div.addEventListener('click',clickhandler) );

.section--section--bukkg
  transition:ease-in-out 250ms all;
  border:1px solid red;
  padding:1rem;
  margin:1rem;


[aria-expanded="false"] .section--section--heading
  display:none;

[aria-expanded="true"] .section--section--heading
  display:block;

<div class='section--section--bukkg' data-purpose='section-panel' aria-expanded='false'>
  <div class='section--section--heading' role='button' tabindex=0 data-purpose='section-heading'>
    <div class='section-title' data-purpose='section-panel'>A title of some sort 1</div>
    <span class='section-chevron'>Some content in a SPAN 1</span>
    <div class='font-text-xs'>teeney weeney text 1</div>
  </div>
</div>

<div class='section--section--bukkg' data-purpose='section-panel' aria-expanded='false'>
  <div class='section--section--heading' role='button' tabindex=1 data-purpose='section-heading'>
    <div class='section-title' data-purpose='section-panel'>A title of some sort 2</div>
    <span class='section-chevron'>Some content in a SPAN 2</span>
    <div class='font-text-xs'>teeney weeney text 2</div>
  </div>
</div>

<div class='section--section--bukkg' data-purpose='section-panel' aria-expanded='false'>
  <div class='section--section--heading' role='button' tabindex=2 data-purpose='section-heading'>
    <div class='section-title' data-purpose='section-panel'>A title of some sort 3</div>
    <span class='section-chevron'>Some content in a SPAN 3</span>
    <div class='font-text-xs'>teeney weeney text 3</div>
  </div>
</div>