javascript - JQuery - 使用 cookie 和窗口宽度在选项卡溢出上进行响应式导航

Question

这是一个有趣的问题。

我有一个看起来像这样的导航栏:

< div id = "main_nav" >
< ul >
< li id = "Tab1" > Home < / li >
< li id = "Tab2" > Home1 < / li >
< li id = "Tab3" > Home2 < / li >
< li id = "etc" > etc etc < / li >
...
< / ul >
< / div >

所以#main_nav 的固定宽度为 980px，隐藏了溢出，标签是内联 block 。当屏幕宽度减小时，选项卡溢出并超出屏幕 View ，thou 被隐藏。

为了让它变得有趣，我创建了一个属性来捕获最后一个选项卡并查看它是否溢出，如果溢出，则触发事件，以便选项卡将 from block 更改为响应式设计等其他内容。

代码如下:

$( window ).on( 'resize', function(){ resize(); } );

function resize() {
var pageWidth = $ ( "#main_nav" ).width();
var elementWidth = $ ( "#tab14" ).width();
var elementLeft = $ ( "#tab14" ).position().left;

if ( pageWidth - ( elementWidth + elementLeft ) < 0 ) { 
$ ( 'ul > li' ) .css ( { 'float': 'left' } ); 
}
else {
$ ( 'ul > li' ) .css ( { 'float': '' } );
}
}

问题:标签开始闪烁，因为它检查#tab14 是否溢出，刷新时您需要调整窗口大小以达到该状态。

问题:1. 与问题无关，但是，什么是一个好的 Jquery 计数器自动查找最后一个选项卡的编号并填充到 $("#tab NUMBER?").width();

1. 为了避免闪烁，我尝试了定时器，但都没有用。你们中有人知道如何在触发 Tab 事件(标签溢出)时保存屏幕宽度的 Cookie 吗？因此，只有在达到屏幕宽度以将选项卡返回到其原始形状后，我才能触发 else 事件。

非常感谢您的意见!谢谢。

Answer 1

您可以使用 window.localStorage 方法在 JavaScript 中保存 cookie。看看https://developer.mozilla.org/en/docs/Web/Guide/API/DOM/Storage获取更多信息。