我有一个基本的jQuery下拉菜单,并在手机上进行测试。
遇到的一个问题是,右侧的子菜单有时会超出屏幕边缘,因为其中一个或多个项目中的文本太长。用户当然可以向右滚动一点,但这不是一个很好的解决方案。有一个类似的问题here,但我无法让提出的答案起作用(而且由于我仍然完全不了解JS / jQuery,所以我徘徊不前)。
一般的想法似乎是获取当前子菜单的左位置+宽度(确保首先显示它们,然后再隐藏它们或在用户点击菜单时显示它们并将它们移动),然后查看该值是否大于屏幕宽度。如果是,则应将其向左移动差值。然而,我的尝试似乎对元素没有任何影响,菜单仍然部分地出现在屏幕外。目前,我有以下代码(在body加载后运行):
var menus = $('#navbar').find('.subMenu');
menus.show();
menus.each(function(index) {
var offsetMenu = $(this).offset();
var diff = screen.width - ($(this).outerWidth + offsetMenu.left);
if(diff < 0) {
$(this).offset({top:offsetMenu.top, left:offsetMenu + diff});
}
});
menus.hide();
jQuery的版本为1.7.2,HTML结构如下(简化版本):
<div id="navbar">
<ul>
<li class="dropdown"><a href="#">Link A</a></li>
<li class="dropdown"><a href="#">Link B</a>
<ul class="subMenu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
</ul>
</div>
我该怎么让它起作用?
编辑:这是相关的CSS。
#navbar ul.subMenu {
position:absolute;
display:none;
background-color:#FFAF1E;
}
#navbar ul.subMenu li {
clear:both;
}
#navbar a {
text-decoration:none;
color:#0C1F6E;
display:block;
padding-right:10px;
padding-left:10px;
}