Question

我有一个分层下拉菜单，通过使用空格字符可以在视觉上区分层次结构

示例

<select>
    <option value='1'>Top Level Item</option>
    <option value='2'>&nbsp;&nbsp;&nbsp;Lower Level Item</option>
    <option value='3'>&nbsp;&nbsp;&nbsp;Another Lower Level Item</option>
    <option value='4'>Another Top Level Item</option>
</select>

这适用于除iPhone之外的所有浏览器，其中忽略空格并且所有项目都显示在同一级别。

我正在使用被动设计（移动设备和桌面设备相同的DOM）并且已经决定仅仅为主题选择集成jQuery Mobile不是一个好选择。

是否有任何简单的解决方法或小插件可以帮助我实现IOS浏览器？

<optgroup>元素不适合b / c可以选择一些父选项。 <optgroup>不允许我尽可能地选择父类别

此功能要求的核心是，所有特定网站的导航都必须位于一个下拉列表中，就像触摸友好的元素一样。

Answer 1

您可以尝试使用：&zwj;或&zwnj;

使用零宽度连接器/零宽度非连接器实体启动层次结构分隔符

Answer 2

唯一的选择是使用<SELECT>的HTML / CSS替换。

请参阅：jQuery select box replacement

Answer 3

这似乎很适合我的需求，但它并不完全完美 - 在桌面上有一条不可选择的线在顶部。

<select>
    <optgroup>
        <option value='1'>Top Level Item</option>
        <option value='2'>&zwj;&nbsp;&zwj;&nbsp;&zwj;&nbsp;Lower Level Item</option>
        <option value='3'>&zwj;&nbsp;&zwj;&nbsp;&zwj;&nbsp;Another Lower Level Item</option>
        <option value='4'>Another Top Level Item</option>
    </optgroup>
</select>

IOS Safari <select>元素</select>

3 个答案: