jquery页面头部菜单自适应展示个数同时兼容页面放大缩小的自适应展示处理方案

案例:NoteShare专题头部菜单的自适应个数展示处理
jquery页面头部菜单自适应展示个数同时兼容页面放大缩小的自适应展示处理方案

以下是代码情况

var time = null;
$(window).resize(function() {
	if (null != time) {
		clearTimeout(time);
	}
	time = setTimeout(function() {
		//菜单重置
		menuReset();
	}, 100);
});
function menuReset() {
	//将所有菜单显示出来,此做法是为了在将页面放大时可以把之前的隐藏元素重新释放出来
	$("#pc-nav").find("li").show();
	while (true) {
		try {
			//获取所有未隐藏的菜单li
			var li_list = $("#pc-nav")
					.find("li:visible");
			var length = li_list.length;
			if (length > 2) {
				var $inverseFirstLi = $(li_list[length - 1]);
				//换行的元素的top值肯定是会变化的所以用它来判断是否放不下
				var top = $inverseFirstLi
						.offset().top;
				if (top > 10) {
					//说明li已经换行了,隐藏倒数第二个菜单,最后一个跟多按钮一直保留
					var $inverseSecondLi = $(li_list[length - 2]);
					$inverseSecondLi.hide();
				} else {
					break;
				}
			}
		} catch (e) {
			break;
		}
	}
}



作者:星辰 时间:2018-06-19 浏览 2977评论 0 赞 0砸 0 标签: jquery 前端 demo
评论
还可以再输入500个字

请您注意

·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款