Question

这是一个按钮，用于触发关于Moodle boost主题的侧菜单打开/关闭。我试图在页面加载时默认情况下隐藏菜单。

因此，我需要在页面加载时将<button aria-expanded="true"设置为<button aria-expanded="false"。但是，我尝试过的所有Javascript代码片段都需要该元素具有“ Id”或“ Name”；而且该按钮都没有。

问题：如何在页面加载时将<button aria-expanded="true"更改为<button aria-expanded="false"-而不更改Moodle的源代码？

<button aria-expanded="true" 
aria-controls="nav-drawer" 
type="button" 
class="btn nav-link float-sm-left mr-1 btn-secondary" 
data-action="toggle-drawer" 
data-side="left" 
data-preference="drawer-open-nav">
<i class="icon fa fa-bars fa-fw " 
aria-hidden="true" aria-label="">
</i>
<span class="sr-only">Side panel</span>
</button>

到目前为止已经尝试过：我已经搜索了是否有人已经这样做了。找不到任何东西。尝试了几个onload Javascript代码段，但没有任何效果。将感谢您的指导和帮助。

Answer 1

您可以查找图标或更具体的元素，因为该图标可以多次使用（或使用:nth-child选择它）并使用jQuery查找上一个元素。然后相应地更改按钮的属性。

$('.icon fa fa-bars fa-fw').prev().attr("aria-expanded","false");

Answer 2

下面是我用纯JavaScript编写的codepen solution的链接，这是说明：

var btn = document.querySelectorAll("button"), dropdownBtn;

window.onload = function(){
    for (var i=0; i<btn.length; i++) {
        if(btn[i].getAttribute("data-action") == "toggle-drawer") {
            console.log(btn[i]);
            btn[i].setAttribute("aria-expanded", "false");
            break;
        }
    }
};

由于您的按钮没有唯一的类或ID，因此继续操作，并假定按钮上的data-attribute中的任何一个都是唯一的（在本例中为data-action）。另外，我假设您的HTML文档中有很多按钮，因此我选择了所有按钮，然后遍历它们来查找data-action属性，并在找到它后立即将其aria-expanded值设置为{ {1}}并退出循环。

所有这些都是在文档加载时发生的。

在页面加载时将aria-expanded =“ true”更改为false

2 个答案: