【问题标题】:The dropdown menu 'aria' only works below 714px Bootstrap Wordpress theme下拉菜单“aria”仅适用于 714px Bootstrap Wordpress 主题
【发布时间】:2019-06-14 02:34:54
【问题描述】:

我正在使用 Wordpress“店面”的子主题构建一个自定义网站,但我在移动引导程序 NAV 切换方面遇到了很大问题。

使用菜单切换响应式菜单,它不会在 870 像素宽处显示下拉菜单,而仅在 714 像素宽处显示。我一直在尝试解决这个问题,但没有成功,我唯一注意到的是切换按钮上的按钮类。如果您查看代码检查器,aria-expanded="false" 显示的宽度约为 870 像素,如果我手动输入代码,则值“true”因此读取 aria-expanded="true" 它工作正常。

非常感谢任何帮助我已经尝试修复几个小时但没有成功纠正。下方网页链接是移动主导航菜单右上角

https://tiltrak.com/webdev/

【问题讨论】:

    标签: wordpress bootstrap-4 wordpress-theming wai-aria


    【解决方案1】:

    aria-expanded 是向屏幕阅读器提示元素用途的提示。 It does not provide any kind of behavior. 通常,您是否设置该属性对您的网站的工作方式没有影响。

    但是,由于 ARIA 属性与任何其他 html 属性一样,您可以在您的 CSS 中基于属性的值设置条件逻辑,如果该条件逻辑隐藏或取消隐藏元素,它可能影响您网站的外观。

    在这种情况下,有一个

    <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Primary Navigation">
      <button class="menu-toggle" aria-controls="site-navigation" aria-expanded="false"><span>Menu</span></button>
      <div class="primary-navigation">
        ...
      </div>
      <div class="handheld-navigation">
        <ul id="menu-mobile-main-navigation" class="menu">
        ...
      </div>
    

    aria-expanded 在点击按钮时被切换时,下面的 CSS 就会起作用:

    .main-navigation.toggled .handheld-navigation,
    .main-navigation.toggled .menu>ul:not(.nav-menu),
    .main-navigation.toggled ul[aria-expanded="true"] {
      max-height: 9999px;
    }
    

    但这有点像red herring。是的,CSS 中有一个aria-expanded,但它在

      上,并且
        没有被展开,菜单按钮是。但是,当按钮被选中时,主
    猜你喜欢
    • 1970-01-01
    • 2013-10-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-09-12
    • 2021-06-20
    相关资源
    最近更新 更多