所以我已经建立了我的第一个响应式网站,但在移动设备上的菜单有问题。当你使用手机时,你可以从下拉菜单中选择一个选项(下面的HTML),它会把你带到正确的页面。然而,当页面加载时,它默认返回'Home',这是列表中的第一个选项。
这意味着当你在另一个页面时,你不能选择home。但我需要的是,当选择的选项和新的页面加载为一个选择,然后成为默认选项。所以你可以使用下拉菜单返回主页。
我以前没有这样做过,所以希望它相当简单!
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在移动设备上启用下拉菜单。
如果你需要更多的信息,请告诉我,谢谢。
这可能有帮助:
jQuery(document).ready(function(){
jQuery("#mobile_menu").val(location.pathname)
});
这将尝试将#mobile_menu
的值设置为与location(当前URL)的路径部分相同。
使用document.URL
可以知道当前的URL。将此URL与下拉菜单中的值进行比较,您可以在页面加载时选择相应的选项。如。您可以使用类似的方法:
var currentURL = document.URL;
if (currentURL.indexOf("home"))
{
$("#mobile_nav select").val("home");
}
使用window.location.href
获取当前位置并选择
jQuery(document).ready(function(){
jQuery("#mobile_menu").val(window.location.href);
});
我在那方面的知识已经过时了,但这可能会带来一些想法(我希望)。
<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>