Question

我正在开发一个响应式网络应用程序，它有一个城市菜单，在它下面有很多选项。在桌面上它使用ul > li > a，但在较小的屏幕上，它会隐藏<a>并使选择/选项菜单可见。我面临的问题是它在Android中运行良好。甚至在ios chrome中也很完美。但在ios safari中我必须DOUBLE TAP列表/选择项目才能打开选择/选项菜单。这是代码

<ul> <li id="12">
            <a href="/fashion-collections/2014/1-spring-summer/1-ready-to-wear/12-kiev">Kiev</a>
            <select class="designer-mobile-dropdown">
              <option>
                Kiev
              </option>
              <option value="/anna-k-ready-to-wear-spring-summer-2014-kiev-4971">
                Anna K
              </option>
              <option value="/natasha-zinko-ready-to-wear-spring-summer-2014-kiev-4945">
                Natasha Zinko
              </option>
              <option value="/omelya-atelier-ready-to-wear-spring-summer-2014-kiev-4948">
                Omelya Atelier
              </option>
              <option value="/paskal-ready-to-wear-spring-summer-2014-kiev-4954">
                Paskal
              </option>
              <option value="/sasha-kanevski-ready-to-wear-spring-summer-2014-kiev-4960">
                Sasha Kanevski
              </option>
              <option value="/yasya-minochkina-ready-to-wear-spring-summer-2014-kiev-4951">
                Yasya Minochkina
              </option>
            </select>
          </li> </ul>

小屏幕上的

：

ul > li > a { display: none }

我还给了一些transition效果，它在ios chrome中运行良好但在ios safari中没有效果

box-shadow: 0px 0px 10px #777   
background: rgba(255,255,255,1)
z-index: 5
-webkit-transition: all 1s ease 0s
transition: all 1s ease 0s

DOUBLE TAP意味着：在第一次轻击li > select时，它会在第二次点击时运行转换，它会打开ios本机选择/选项菜单。我必须在单击时打开它！

Answer 1

幸运的是，我已经以某种方式解决了它。我在CSS中启用了：悬停，我猜这是ios safari中问题的原因。

当我使用媒体查询评论较小尺寸的设备时，它对我有用。现在在ios safari以及ios chrome上运行完美

选择菜单<li>在ios chrome上工作但不在ios safari

1 个答案: