4

所以我建立了我的第一个响应式网站，但移动设备上的菜单存在问题。这一切都有效，因此当您使用移动设备时，您可以从下拉列表（下面的 HTML）中选择一个选项，它会将您带到正确的页面。但是，当页面加载时，它默认返回“主页”，这是列表中的第一个选项。

这意味着您在另一个页面上时无法选择主页。但是我需要的是选择该选项时，并且为选择的一个新页面加载以成为默认选项。因此，您可以使用下拉菜单返回主页。

我以前没有这样做过，所以希望它相当简单！

HTML：

 <form id="mobile_nav">
            <select id="mobile_menu">

<option value="/">Home</option>           
<option value="/page 1/">page 1</option>
<option value="/page 2/">page 2</option>
<option value="/page 3/"page 3</option>
<option value="/page 4/"page 4</option>
<option value="/page 5/"page 5</option>

            </select>
 </form>

JS：

 jQuery(document).ready(function() {
        nav();

          jQuery("#mobile_menu").val(location.pathname);

        jQuery("#mobile_menu").change(function() {
            document.location = jQuery(this).val();
        });

JS 在移动设备上启用下拉菜单。

如果您需要更多信息，请告诉我，谢谢。

4

4 回答 4

1

这可能会有所帮助：

jQuery(document).ready(function(){
    jQuery("#mobile_menu").val(location.pathname)
});

这将尝试将值设置为#mobile_menu与位置的路径部分（当前 URL）相同。

于 2013-04-08T12:41:31.540 回答
0

您可以使用 了解当前 URL document.URL。将此 URL 与下拉列表中的值进行比较，您可以在页面加载时选择相应的选项。例如。您可以使用与此类似的方法：

var currentURL = document.URL;
if (currentURL.indexOf("home"))
{
   $("#mobile_nav select").val("home");
}
于 2013-04-08T12:41:28.890 回答
0

用于window.location.href获取当前位置并选择该位置

 jQuery(document).ready(function(){
    jQuery("#mobile_menu").val(window.location.href);
 });
于 2013-04-08T12:42:27.770 回答
0

我在该领域的知识已经过时，但这可能会带来一些想法（我希望）。

<head>
  <script>
    function makeDefault(elm) {
        elm.options[elm.selectedIndex].selected = 'selected';
        alert(elm.innerHTML);
    }
  </script>
</head>
<body>
  <form id="mobile_nav">
    <select id="mobile_menu" onchange="makeDefault(this)">
      <option value="/">Home</option>           
      <option value="/page 1/">page 1</option>
      <option value="/page 2/" selected='selected'>page 2</option>
    </select>
  </form>
</body>
于 2013-04-08T13:07:09.137 回答