Javascript 具有更多链接的引导导航。。尝试使用jquery找到解决方案

我正在尝试为我的站点导航找到一个包含更多链接的解决方案。添加更多链接后，将显示2、3行。请查看所附图片

在上图中，我添加了蓝色链接，其余的都是默认的引导导航。我想保持一行导航。如果需要查看更多链接，则需要单击该蓝色链接（出于测试目的，我将其设置为“无显示”）。此外，当重新调整浏览器大小时，它还应保持在一行中。 我编写了一个jquery代码，当浏览器减小大小时，它就会工作。但是当增加尺寸时，一个接一个地再加一次是行不通的。有什么办法可以这样做吗？任何人都可以帮我解决这个问题，或者给我一个想法。 谢谢

我的密码

$（文档）.ready（函数（e）{
$（文档）.load（$（窗口）.bind（“load”，resThis））；
$（文档）.load（$（窗口）.bind（“resize”，resThis））；
var tot=$（'.nav'）.find（'.chld'）.length；
var pos_top=$（'.btn'）.position（）.top；
var marg=$（'.container'）.width（）；
函数resThis（）{
对于（var i=tot；i>=0；i--）{
如果（位置顶部>0）{
$（“.nav.chld:n子项（“+i+”）.addClass（'a'）；
}
pos_top=$（'.btn'）.position（）.top；
}
}
});
.not{padding:0px；背景色：#FFFFFF；边框半径：0%；}
.a{显示：无！重要；}

无标题文件
//ul{列表样式：无；}
//ul li{浮点：左；填充：10px 30px；背景色：#C0B9B9；边距：10px；边框半径：10%；}
.not{填充：0px；背景色：#FFFFFF；边框半径：0%；}
.a{显示：无！重要；}
切换导航


































即使在全屏模式下，它也能按我的意愿工作，并将其调整到各种宽度。。。无法复制您描述和显示的错误。
如何“我想创建一个水平导航栏，作为一行中的链接列表来实现。如果列表超过1行，则仅当用户单击“更多”按钮（屏幕截图中的蓝色按钮）时，附加链接才应可见？”.我当前的解决方案在屏幕宽度减小时起作用，但在屏幕宽度增大时不起作用，下面是代码“Thank you gvijay”。我想对此做更多解释。它在递减时有效，但在递增时无效。如果我不单击蓝色按钮，它对我就不起作用，但我不明白你为什么要使用蓝色按钮。如果你想让下拉按钮变成蓝色，为什么不改变它的背景色呢？看起来容易多了