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

Question

我有以下元素：

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

我想使用 jquery（或者只是 javascript 会起作用）来更改 aria-expanded 字段以在 true 和 false 之间切换。

我该怎么做？

谢谢！

Answer 1

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

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

Answer 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>

Answer 3

Bootstrap 根据元素的点击切换 class。单击后提到 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;
}

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

How to use Jquery how to change the aria-expanded="false" part of a dom element (Bootstrap)?

html

javascript

css

jquery

twitter-bootstrap