下拉菜单在 Safari 上不起作用答案

【问题标题】：Dropdown menu not working on safari下拉菜单在 Safari 上不起作用
【发布时间】：2017-02-22 21:44:24
【问题描述】：

我有一个简单的下拉菜单，可以在 chrome/firefox 上运行，没有任何问题，但在 safari 上不起作用 - 单击按钮时菜单不会出现：

<div>
    <a id='action-btn-1' href='#' data-toggle='dropdown' class='btn btn-default btn-xs edit' aria-haspopup='true' aria-expanded='false' role='button'>
        <span class="caret"></span>
    </a>
    <ul class='dropdown-menu text-left' role='menu' aria-labelledby='dLabel'>
        <li>aaa</li>
        <li>bbb</li>
    </ul>
</div>

这里可能有什么问题？

【问题讨论】：

标签： javascript jquery css twitter-bootstrap safari

【解决方案1】：

role='menu' 在 ul 元素下在 Safari 中不受支持。

您需要使用<select> elelemt。

【讨论】：

【解决方案2】：

嗯...您一直在使用ARIA 功能。我一直在关注这项技术，只是出于兴趣。尽管必须指出，目前（2017 年 2 月）ARIA 并未得到如此广泛的支持。您可以很好地了解浏览器对 ARIA 功能的支持here。

但该表含糊不清，维护不当。您必须单击每个元素才能看到哪一行是什么...要找出哪个浏览器支持什么并不容易。

<ul class='dropdown-menu text-left' role='menu' aria-labelledby='dLabel'>
    <li>aaa</li>
    <li>bbb</li>
</ul>

这里的问题是role='menu'。您必须先检查 Opera 是否支持此功能。如果是这样，可能是他们比其他浏览器（如 Firefox）更严格地遵循规范。也许您可以尝试添加menuitem-role 以验证是否不是。

<ul class='dropdown-menu text-left' role='menu' aria-labelledby='dLabel'>
    <li role="menuitem">aaa</li>
    <li role="menuitem">bbb</li>
</ul>

如果它不起作用，那么可能是 Safari 不支持它还。如果是这种情况，您可以考虑改用select 元素。

【讨论】：