jquery - 如何创建类似于 chrome 书签栏的自定义下拉菜单？

Question

我想创建一个下拉菜单，它可以在主 div 中包含一些书签。如果用户添加了更多书签并且书签不能包含在主 div 中，它们将隐藏在下拉菜单中。然后，用户可以将鼠标悬停在箭头上，隐藏的菜单会显示其余的书签。

我需要检查下一个书签是否可以添加到主 div 并基于此（如果主 div 空间不足）将下一个书签附加到下拉菜单。

如果网上有类似的教程，请告诉我，不胜感激。

Answer 1

将其创建为单个无序列表。

要检查有多少 li 适合：

noOfLi = width of ul / width of li

$(ul.normal).width() to get width of ul and same function for li

检查是否

noOfLi > $('ul.normal li').length //if not no problem yyay

把所有的 li 都复印一份来处理。

var lis = $('ul.normal li').clone(); //now you have an array of li nodes

将其拆分为两部分，一部分用于常规 ul，一部分用于下拉。

normalLis = lis.slice( 0, noOfLi - 1 );
dropdownLi = lis.slice( noOfLi, lis.length );

现在把 normalLis 放到 normal ul 中，下拉 lis 到 dropdown ul

$('ul.normal').html(normalLis)
$('ul.dropdown').html(dropdownLis)

如果 lis 溢出，您还可以激活更多链接，并在其上添加悬停事件以在悬停时显示下拉菜单。

以上代码仅供参考，请勿复制粘贴。