下拉菜单“aria”仅适用于 714px Bootstrap Wordpress 主题
Posted
技术标签:
【中文标题】下拉菜单“aria”仅适用于 714px Bootstrap Wordpress 主题【英文标题】：The dropdown menu 'aria' only works below 714px Bootstrap Wordpress theme 【发布时间】：2019-06-14 02:34:54 【问题描述】：我正在使用 Wordpress“店面”的子主题构建一个自定义网站，但我在移动引导程序 NAV 切换方面遇到了很大问题。
使用菜单切换响应式菜单，它不会在 870 像素宽处显示下拉菜单，而仅在 714 像素宽处显示。我一直在尝试解决这个问题，但没有成功，我唯一注意到的是切换按钮上的按钮类。如果您查看代码检查器，aria-expanded="false" 显示的宽度约为 870 像素，如果我手动输入代码，则值“true”因此读取 aria-expanded="true" 它工作正常。
非常感谢任何帮助我已经尝试修复几个小时但没有成功纠正。下方网页链接是移动主导航菜单右上角
https://tiltrak.com/webdev/
【问题讨论】：
【参考方案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，但它在
以上是关于下拉菜单“aria”仅适用于 714px Bootstrap Wordpress 主题的主要内容，如果未能解决你的问题，请参考以下文章