我有一个基本的jQuery下拉菜单,正在移动设备(特别是手机)上对其进行测试.
我遇到的一个问题是,右侧的子菜单有时会超出屏幕边缘,因为一个或多个项目中的文本太长.用户当然可以稍微向右滚动,但这不是一个很好的解决方案.还有一个类似的问题here,但是我无法获得建议的答案(因为我还是JS / jQuery的新手,所以我很困惑.)
总体思路似乎是获取当前子菜单的左侧位置宽度(确保先显示它们,然后再次隐藏它们或在用户点击菜单时显示它们并移动它们),然后查看该值是否大于屏幕宽度.如果是,则应将其向左移动该差值.但是,我的尝试似乎对元素没有任何作用,并且菜单始终部分显示在屏幕外.目前,我有这个(在身体加载后运行):
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;
}
解决方法:
我终于有了以下工作:
function adjustSubMenus()
{
var menus = $('#navbar').find('.subMenu');
menus.each(function(){
$(this).css("left","");
adjustSingleMenu($(this))
} );
}
function adjustSingleMenu(element)
{
element.show();
var thisMenuWidth = element.outerWidth();
var thisMenuPos = element.offset();
var diff = (thisMenuWidth + thisMenuPos.left) - window.outerWidth;
if(diff > 0) {
element.css("left", function() { return thisMenuPos.left - diff; });
}
element.hide();
}
$('body').ready(function() {
$(window).resize(adjustSubMenus());
if(window.outerWidth <= 720) {
$('html').mousedown(function() {
$('#navbar').find('.subMenu').each(function(index) {
if($(this).is(":visible") ) {
$(this).css("left","");
$(this).hide();
}
} );
});
$('#navbar').mousedown(function(event) {
event.stopPropagation();
});
$('.dropdown').mousedown(function() {
var ele = $(this).find('.subMenu');
$('#navbar').find('.subMenu').each(function(index) {
if(!$(this).is(ele) && $(this).is(":visible") ) {
$(this).css("left","");
$(this).hide();
}
} );
if(ele.is(":visible")) {
ele.css("left","");
ele.hide();
}
else {
adjustSingleMenu(ele);
ele.show();
}
});
}
else
{
$('.dropdown').hover(
function() { $(this).find('.subMenu').stop(true,true).slideDown("fast"); },
function() { $(this).find('.subMenu').stop(true,true).hide(); }
);
}
});
唯一需要注意的是,如果在更改手机方向时打开菜单,则菜单可能会出现在屏幕外.关闭并重新打开菜单将解决此问题.其他一切都完美运行.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。