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，隐藏了溢出，而tab是内联块。当屏幕宽度减小时，标签会溢出并超出屏幕视图，因此会隐藏。

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

以下是代码：

$( 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计数器可以自动找到最后一个标签的编号并填写$（＆＃34; #tab NUMBER？＆＃34;）。width（）; < / p>

为了避免闪烁，我尝试了Timer，没有工作。当Tab事件（标签溢出）被触发时，你们中的任何人都知道如何保存屏幕宽度的Cookie吗？因此，只有在达到屏幕宽度后才能触发else事件，以将制表符恢复为原始形状。

非常感谢您的投入！谢谢。

Answer 1

您可以使用window.localStorage方法在JavaScript中保存Cookie。有关详细信息，请查看https://developer.mozilla.org/en/docs/Web/Guide/API/DOM/Storage。

Answer 2

谢谢大家，这是我自己的解决方案：

溢出时的响应式导航：

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

function more_nav() {
    $('#main_nav li').css({'width': ''});
    $('#main_nav li').css({'float': ''});
}

function less_nav() {
    $('#main_nav li').css({'width': '50%'});
    $('#main_nav li').css({'float': 'left'});
}

function ress_nav() {
    var lastTab = $("#main_nav li:last-child");
    var winWidth = $(window).width();
    var elWidth = $(lastTab).width();
    var elLeft = $(lastTab).position().left; 

    if (winWidth - (elWidth + elLeft) < 0) {
        $.cookie('winWidth', winWidth);
        less_nav();
    }
    else if ($(window).width() > $.cookie('winWidth')){
        $.removeCookie('winWidth', winWidth);
        more_nav();
    }
}

if ($(window).width() > $.cookie('winWidth')) {more_nav()} else {less_nav()}

希望它可以帮助任何寻找这种功能的人。

谢谢。

JQuery - 选项卡上的响应式导航使用Cookie和窗口宽度溢出

2 个答案: