1

我正在尝试创建一个可在移动设备或更小的设备上使用的菜单，因为ul菜单在分辨率较低的设备上会从屏幕上消失。下面是我尝试使用的代码，但由于某种原因它不起作用。下拉框工作正常，但单击选项不会执行任何操作。

首先是HTML：

<select> 
            <option value="" selected="selected">Select</option> 
            <option value="index.html">Home</option> 
            <option value="about.html">About Us</option> 
            <option value="testimonials.html">Testimonials</option> 
            <option value="events.html">Events</option> 
            <option value="contracts.html">Contracts</option> 
            <option value="faq.html">F.A.Q.</option> 
            <option value="contact.html">Contact Us</option> 
</select>

现在，JS。

<script>$("select").change(function() {
window.location = $(this).find("option:selected").val();
});</script>

现在，CSS 将其隐藏在普通浏览器上，但在小型设备上显示。

select
  {
  display:none;
  }

@media (max-width: 480px) {
  nav  { display: none; }
  select { display: inline-block; }
  }

我一遍又一遍地检查我的编码，但我似乎无法让它工作。有没有人有任何想法？

4

1 回答 1

0

iPhone / Android 浏览器是否支持 CSS @media 手持设备？

请参阅 CSS 中媒体查询的问题。或者，您可以使用 Jquery 来获取屏幕大小并反映 UI 级别的更改。

检查 iphone 和平板电脑对 CSS3 媒体查询的兼容性。

hmhcreative发布的 Jsfiddle链接正在运行。它也应该适用于 iPhone 或平板电脑。

于 2013-06-15T19:03:19.887 回答