下拉菜单 'aria' 仅在 714px 以下有效 Bootstrap Wordpress 主题

Question

我正在使用 Wordpress 的子主题构建自定义站点 'storefront'，但我在移动 bootstrap NAV 切换方面遇到了很大问题。

使用菜单切换响应式菜单时，它不会显示 870 像素宽的下拉菜单，只会显示 714 像素宽的下拉菜单。我一直在尝试解决这个问题，但没有成功，我唯一注意到的是切换按钮 class。如果你在代码检查器中查看 aria-expanded="false" 显示在大约 870px 宽，如果我手动输入代码值 "true" 所以读取 aria-expanded="true" 它工作正常。

非常感谢任何帮助我已经尝试修复了几个小时，但没有成功纠正。 Web link 下面是移动主导航菜单右上角

https://tiltrak.com/webdev/

Answer 1

aria-expanded is a hint to screen readers as to the purpose of an element. It does not provide any kind of behavior. 通常，您是否设置该属性对网站的运行方式没有影响。

但是，由于 ARIA 属性与任何其他 html 属性一样，您 可以 根据属性，如果该条件逻辑隐藏或取消隐藏元素，它可能影响您网站的外观。

在这种情况下，有一个

<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，但它位于

上，
未展开，菜单按钮展开。但是，当按钮被选中时，主
有一个 "toggled" class 添加到它。它从

<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Primary Navigation">

至

<nav id="site-navigation" class="main-navigation toggled" role="navigation" aria-label="Primary Navigation">

这会导致具有子菜单的

具有最大高度，从而使其得以显示。

但主要问题是有一个

<div class="primary-navigation">...</div>
<div class="handheld-navigation">...</div>

只有一个

元素应该可见，如果 classname 是一个线索，第一个应该在桌面设备上可见，第二个应该可见如果在手机上。但是当我在 firefox 上尝试你的示例 URL，然后按 ctrl+shift+M 打开移动模拟器并将设备设置为 "iphone X" 并将其横向放置，我得到一个 812px 宽的显示器并且 "primary-navigation" 可见并且手持设备被隐藏。我认为这就是问题所在。

如果我切换到 "iphone X" 但在纵向模式下，宽度为 375px 并且工作正常。

您可能对 <link media="screen and (min-width:500px)"...> 有疑问。 （这只是一个示例数字，500px，我并不是说你正在使用它。）

查找两个

primary-navigation 和 handheld-navigation 在哪里初始化以及其中一个如何设置 display:none。