下拉菜单”aria”仅在714px Bootstrap WordPress主题以下起作用 _WordPress主题

我正在使用Wordpress” 店面” 的子主题构建自定义网站, 但移动引导NAV切换存在很大问题。
使用” 菜单” 切换响应菜单时, 它不会显示870像素宽的下拉菜单, 而只会显示714像素宽的下拉菜单。我一直在尝试解决此问题, 但是没有成功, 我唯一注意到的是切换上的按钮类。如果你在代码检查器中查看, 则aria-expanded =” false” 的宽度大约为870px, 如果我手动输入代码, 则值为” true” , 因此读取aria-expanded =” true” 即可正常工作。
非常感谢我一直在尝试解决几个小时的问题, 但是在纠正方面没有成功。下方的Web链接是右上方的移动主导航菜单
https://tiltrak.com/webdev/
#1aria-expanded是向屏幕阅读器提示有关元素用途的提示。它不提供任何行为。通常, 是否设置该属性对网站的工作方式没有影响。
但是, 由于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; }

但这有点像鲱鱼。是的, 在CSS中有一个aria扩展名, 但是在< ul> 上, 并且< ul> 没有扩展, 菜单按钮是。但是, 当选择按钮时, 主< nav> 中添加了” 切换” 类。它从

< 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> 具有最大高度, 从而使其显示出来。
但是主要的问题是

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

这些< div> 元素中只有一个是可见的, 并且如果类名是一个线索, 则第一个元素应该在台式设备上可见, 而第二个元素在移动设备上应该可见。但是, 当我在firefox上尝试你的示例URL, 然后按ctrl + shift + M打开移动模拟器并将设备设置为” iphone X” 并将其放置在横向时, 我得到了812px宽的显示和” 主导航” 可见, 并且手持设备处于隐藏状态。我认为这就是问题所在。
如果我切换到” iPhone X” 但处于纵向模式, 则宽度为375px, 可以正常使用。
你可能对< link media =” screen and(min-width：500px)” … > 有问题。 (这只是一个示例数字, 为500像素, 我并不是说这就是你使用的数字。)
【下拉菜单” aria” 仅在714px Bootstrap WordPress主题以下起作用】查找两个< div> 主导航和手持导航的初始化位置, 以及其中一个如何显示：无设置。