iPhone 和 iPad 上的下拉菜单答案

【问题标题】：dropdown menu on iPhone and iPadiPhone 和 iPad 上的下拉菜单
【发布时间】：2013-07-09 07:32:15
【问题描述】：

我的网站上有一个可用的下拉菜单，但它在 iPhone 和 iPad 上根本不起作用。是否有一种可管理的方式来强制 iPhone/iPad 使用其原生菜单选择器？

HTML：

<div class="dropdown"> <span class="dropdown-toggle" tabindex="0"></span>
    <div class="dropdown-text" id="dropdown_colours">Colours</div>
    <ul class="dropdown-content" id="dropdown_colours">
        <li><a href="../black.html" target="_self">Black</a>
        </li>
        <li><a href="../grey.html" target="_self">Grey</a>
        </li>
        <li><a href="../red.html" target="_self">Red</a>
        </li>
        <li><a href="../blue.html" target="_self">Blue</a>
        </li>
        <li><a href="../green.html" target="_self">Green</a>
        </li>
        <li><a href="../purple.html" target="_self">Purple</a>
        </li>
    </ul>
</div>

【问题讨论】：

标签： html iphone css ipad drop-down-menu

【解决方案1】：

我在考虑 CSS 属性 -webkit-appearance，但没有任何值可以强制显示为选择框 AFAIK（如果有的话，webkit 怎么知道它应该将 li 视为 @987654324 @?)

您必须使用select 标签而不是无序列表来使 iOS 的 Webkit 自动将其外观更改为原生的。

您可以检测用户何时使用移动浏览器，并动态加载您的菜单。

如果您不想更改 HTML 标记，您也可以尝试使用 CSS 重现本机选择框...

请参阅 Apple 的 documentation 以供参考。

【讨论】：