javascript 如何使用Jquery如何更改dom元素的aria-expanded=“false”部分(Bootstrap)?

23c0lvtd  于 2023-02-02  发布在  Java
关注(0)|答案(4)|浏览(160)

我有以下要素:

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

我想使用jquery(或者只使用javascript)来修改aria扩展字段,使其在true和false之间切换。
我该怎么做呢?
谢谢!

flvlnr44

flvlnr441#

您可以将.attr()用作的一部分,但您计划切换它:

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

bpzcxfmw2#

由于这个问题要求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>
fumotvh3

fumotvh33#

基于元素的单击的Bootstrap Toggle类。单击后会提到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;
}
3pvhb19x

3pvhb19x4#

您也可以使用prop,但由于它是属性名称,因此将其更改为ariaExpanded

$("button").prop("ariaExpanded", true);

相关问题