Javascript 在可调整大小的导航栏上显示/隐藏按钮

我有一个带有按钮链接的夹持条，在第二行将窗口调整为较小的宽度，每个按钮的下方都有一个按钮环绕，改变导航高度，从导航中删除并附加到下拉菜单中。

当导航高度高于80时，我设法添加了包装好的按钮，但只有当屏幕的初始尺寸很大，所有按钮都在一行时，它才会起作用。但如果屏幕开始时宽度较小，则不会在菜单中附加所有包装好的按钮

这是我的尝试

$（窗口）。调整大小（函数（）{
var-navbar=$（“#navbar”）；
风险值列表=$（“#列表”）；
风险值BTN=$（“#BTN”）；
var last_元素；
对于（var i=0；i80）{
last_元素=list.children（）.last（）；
setTimeout（函数（）{
$（“#btns.下拉菜单”）.prepend（最后一个元素）；
}, 300);
最后一个元素。删除（）；
}
}, 500);
}
});
#导航栏{
宽度：适合的内容；
背景色：#dbdb；
盒影：2px 2px 2px#999；
边界半径：10px；
填充：10px；
}
#名单{
保证金：0；
填充：0；
文本对齐：居中；
显示器：flex；
柔性包装：包装；
}
.项目{
颜色：#333；
字体大小：30px；
字体大小：粗体；
背景色：#F5；
/*显示：内联块*/
填充：10px 30px；
边界半径：5px；
盒影：2px2px2p888；
利润：4倍2倍；
列表样式类型：无；
}
.下拉菜单{
宽度：200px；
填充：0 20px；
}


第1项
第2项
第3项
第4项
第5项
第6项
第7项

下拉按钮
更新-将隐藏项移动到下拉菜单


首先，对css进行更改：

将
display:flex
应用于
#navbar

手动计算
#list
的最大高度，并将
max height
和
overflow:hidden
属性设置为它。在这种情况下，
#list
的最大高度为73px，而不是80px。（项目的高度
.item
<65px+项目的上边距
4px+项目的下边距
.item
4px=73px）如果最大高度不正确，
列表可能无法正确隐藏
项目

设置
项的
显示：内联块

`

`

然后，更新$（window）.resize（）函数。
下面的代码将检查项目是否移动到隐藏区域。此外，使用
.html（）
刷新下拉菜单

let list = $("#list");
let listItems = $("#list .item");
let dropdownMenu = $("#btns .dropdown-menu");

$(window).resize(function() {
    let listPosition = list.position().top;
    let hiddenItems = listItems.filter(function(){
    return $(this).position().top - listPosition > 0;
  }).clone();
    dropdownMenu.html(hiddenItems);
});

更新-将隐藏项移动到下拉菜单


首先，对css进行更改：

将
display:flex
应用于
#navbar

手动计算
#list
的最大高度，并将
max height
和
overflow:hidden
属性设置为它。在这种情况下，
#list
的最大高度为73px，而不是80px。（项目的高度
.item
<65px+项目的上边距
4px+项目的下边距
.item
4px=73px）如果最大高度不正确，
列表可能无法正确隐藏
项目

设置
项的
显示：内联块

`

`

然后，更新$（window）.resize（）函数。
下面的代码将检查项目是否移动到隐藏区域。此外，使用
.html（）
刷新下拉菜单

let list = $("#list");
let listItems = $("#list .item");
let dropdownMenu = $("#btns .dropdown-menu");

$(window).resize(function() {
    let listPosition = list.position().top;
    let hiddenItems = listItems.filter(function(){
    return $(this).position().top - listPosition > 0;
  }).clone();
    dropdownMenu.html(hiddenItems);
});

我看到你在使用引导。如果移动设备上的可折叠菜单是您所需要的，那么您仍然可以在没有任何JS的情况下执行此操作













搜寻
我看到您正在使用引导。如果移动设备上的可折叠菜单是您所需要的，那么您仍然可以在没有任何JS的情况下执行此操作













搜寻
请包括您迄今为止尝试过的代码。请包括您迄今为止尝试过的代码。这有助于隐藏和显示按钮，但在按钮隐藏时不会将其附加到菜单上，在可访问时将其从菜单中删除。您可以从javascript代码中删除
$（窗口）。resize（）
函数。我想这可能行得通。实际上我需要
窗口。调整大小
以获得菜单所需的全部功能。无论如何，谢谢你的建议。我应该道歉！我再次阅读了你的问题，发现我忽略了“将隐藏项移动到下拉菜单”部分。所以我更新了我的答案。请查看更新版本是否有帮助：染料！这就是我需要的。谢谢，非常感谢您的帮助：）此帮助用于隐藏和显示按钮，但在按钮隐藏时未将其附加到菜单上，而在可访问时将其从菜单中删除您可以从javascri中删除
$（窗口）。resize（）
函数