如何使用 Jquery 如何更改 dom 元素（Bootstrap）的 aria-expanded="false" 部分？

Posted 2023-02-22

【中文标题】如何使用 Jquery 如何更改 dom 元素（Bootstrap）的 aria-expanded="false" 部分？

【英文标题】：How to use Jquery how to change the aria-expanded="false" part of a dom element (Bootstrap)?

【发布时间】：2015-03-01 09:04:39

【问题描述】：

我有以下元素：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

我想使用 jquery（或者只使用 javascript）来更改 aria-expanded 字段以在真假之间切换。

我该怎么办？

谢谢！

【问题讨论】：

不添加另一个答案，即使它不完全是现有答案的副本。但是如果你想使用普通的 JS 来做到这一点，你可以使用el.setAttribute("aria-expanded", true); 其中el 是可以使用getElementById 或querySelector 或getElementsByClassName 获得的元素。

【参考方案1】：

您可以使用.attr() 作为您计划切换它的一部分：

$("button").attr("aria-expanded","true");

【讨论】：

使用.prop 并拥有$("button").prop('aria-expanded', true) 怎么样？我读到.attr 适用于 jQuery v1.5 及以下版本，而.prop 适用于 jQuery v1.6 及以上版本。

由于某种原因，$(this).find('.dropdown-toggle').prop('aria-expanded', 'true') 在这种情况下对我不起作用，而 attr() 对我有用。? 我正在使用 jquery v3.2.1

【参考方案2】：

由于问题要求使用 jQuery 或 vanilla JS，因此这里是 vanilla JS 的答案。

我在下面的演示中添加了一些 CSS，以便在按钮的 aria-expanded 设置为 true 时将按钮的字体颜色更改为红色

const button = document.querySelector('button');

button.addEventListener('click', () => 
  button.ariaExpanded = !JSON.parse(button.ariaExpanded);
)

button[aria-expanded="true"] 
  color: red;

<button type="button" aria-expanded="false">Click me!</button>

【参考方案3】：

基于元素点击的引导切换类。点击后提及 aria-expanded 值

$("#navbar-btn-icon").click(function(e) 
  var menuItem = $(this);

  if (menuItem.attr("aria-expanded") === "true") 
    $(".navbar-toggler-icon").addClass('clicked');
  
  else if (menuItem.attr("aria-expanded") === "false") 
    $(".navbar-toggler-icon").removeClass('clicked');
  

);

在 CSS 中添加关闭按钮图标。点击更改

.navbar-toggler-icon.clicked
    background-image: url("close-icon.png");
    transition: 0.2s ease-in;