如何处理一长串选项卡

Question

我有一个动态生成的标签列表：

<ul>
    <li>Tab #1</li>
    <li>Tab #2</li>
    <li>Tab #3</li>
    <li>Tab #4</li>
    <li>Tab #5</li>
    <!-- ...up to #N -->
</ul>

可能有2到无穷大的标签。设计团队希望最后一个标签显示More v[down arrow]并转换为包含剩余标签的下拉列表，当且仅当标签的宽度超出分配的空间时。选择下拉列表中的一个选项卡后，More v文本将更改为所选选项卡的文本，以便用户知道他们所在的选项卡。

Tab #1 | Tab #2 | Tab #3 | Tab #4 | More v
                                    Tab #5
                                    Tab #6
                                    Tab #7
                                    Tab #8
                                    Tab #9

虽然我可以想到几种方法来处理这个问题，是否有任何库可以为我处理这个或是否有任何技术或一般指导方针你喜欢分享？

提前致谢！

Answer 1

如果其他人偶然发现这一点，我想出了自己的解决方案，因为有一些非常具体的业务需求。

工作示例：http://jsfiddle.net/joshpauljohnson/U3vV7/6/