我为移动设备构建了一个具有响应能力的页面。我正在为菜单使用固定位置。有一个菜单按钮,在“触摸”它后会显示一个子按钮。这很完美。但是在使用菜单项后,我必须先滚动页面,然后才能再次单击菜单按钮。
任何想法为什么会这样?
这是为了切换子菜单div:
<script>
$('#navmobile').click(function(){
$('.submenu').toggle();
});
</script>
这个如果子菜单:
<ul id="navmobile">
<li><a href="">MENÜ</a></li>
<ul class="submenu">
<li class="current"><a href="#section-1">Einleitung</a></li>
<li><a href="#section-2">Menüpunkt1</a></li>
<li><a href="#section-3">Menüpunkt2</a></li>
<li><a href="#section-4">Menüpunkt3</a></li>
<li><a href="#section-5">Menüpunkt4</a></li>
</ul>
</ul>
和CSS:
#navmobile {display: block !important; z-index: 100000}
#navmobile li {float: left; list-style: none; margin: 0 18px 0 0; font-size: 26px; text-transform: uppercase; font-weight: bold; -moz-margin-end: 26px}
#navmobile li a {text-decoration: none;padding: 2px 4px;}
#navmobile li.current a, li:hover a{color: #fff; background: #2b9ad0}
#navmobile .submenu {display: none}
#navmobile .submenu {width: 300px; position: absolute; left:-130px; top: 35px; background: #efefef; padding: 5px; border: 2px solid #ddd;border-radius: 1px}
#navmobile .submenu li a{font-size: 30px; text-align: right; line-height: 60px}
以及导航周围容器的css:
.navigation {width: 200px !important;height: 20px;position: fixed;top: 45px;left: 400px}