Javascript 带“引导”的引导菜单；“更多”；期权响应问题

我在工作中使用了bootstrap。我在页面顶部有一堆菜单项，大约15项。因此，我的顶部菜单不适应屏幕宽度。它被溢出菜单引入的下一行打断。我想通过使用“更多”菜单来阻止菜单溢出到下一行

这个想法是，溢出的菜单项移动到“更多”菜单下拉列表。但我不知道如何检测菜单溢出。如何将额外的菜单项移动到“更多”下拉列表中

我有一个基本的结构和标记

小提琴：

标记：

<ul class="nav nav-pills topnavi">
      <li class="active" ><a href="#">Dashboard</a></li>
      <li ><a href="#">Docs</a></li>
      <li ><a href="#">Docs 2</a></li>
      <li ><a href="#">Docs 3</a></li>
      <li ><a href="#">Docs 4</a></li>
      <li ><a href="#">Data</a></li>
      <li ><a href="#">iWeb</a></li>
      <li ><a href="#">Program</a></li>
      <li ><a href="#">Config</a></li>
      <!-- <li ><a href="#">Smart Inside</a></li>
      <li ><a href="#">Settings </a></li>
      <li ><a href="#">Account</a></li>
      <li ><a href="#">Types</a></li>
      <li ><a href="#">Notifications</a></li>
      <li ><a href="#">History</a></li>
      <li ><a href="#">Redmine</a></li>
      <li ><a href="#">Logout</a></li> -->
      <li class="dropdown" >
        <a aria-expanded="false" aria-haspopup="true" role="button" href="#" data-toggle="dropdown" class="dropdown-toggle">
          More <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li ><a href="#">Settings </a></li>
          <li ><a href="#">Account</a></li>
          <li ><a href="#">Types</a></li>
          <li ><a href="#">Notifications</a></li>
          <li ><a href="#">History</a></li>
          <li ><a href="#">Redmine</a></li>
          <li class="divider" role="separator"></li>
          <li><a href="#">Logout</a></li>
        </ul>
      </li>
    </ul>

我想通过“更多”菜单阻止下一行菜单溢出

根据菜单的宽度与所有菜单项的总宽度的比较，您必须收集额外的列表项并将它们放入单独的列表中

从我的回答中得出（并将其用于引导）：

标记：

<ul class="nav nav-pills topnavi">
      <li class="active" ><a href="#">Dashboard</a></li>
      <li ><a href="#">Docs</a></li>
      <li ><a href="#">Docs 2</a></li>
      <li ><a href="#">Docs 3</a></li>
      <li ><a href="#">Docs 4</a></li>
      <li ><a href="#">Data</a></li>
      <li ><a href="#">iWeb</a></li>
      <li ><a href="#">Program</a></li>
      <li ><a href="#">Config</a></li>
      <!-- <li ><a href="#">Smart Inside</a></li>
      <li ><a href="#">Settings </a></li>
      <li ><a href="#">Account</a></li>
      <li ><a href="#">Types</a></li>
      <li ><a href="#">Notifications</a></li>
      <li ><a href="#">History</a></li>
      <li ><a href="#">Redmine</a></li>
      <li ><a href="#">Logout</a></li> -->
      <li class="dropdown" >
        <a aria-expanded="false" aria-haspopup="true" role="button" href="#" data-toggle="dropdown" class="dropdown-toggle">
          More <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li ><a href="#">Settings </a></li>
          <li ><a href="#">Account</a></li>
          <li ><a href="#">Types</a></li>
          <li ><a href="#">Notifications</a></li>
          <li ><a href="#">History</a></li>
          <li ><a href="#">Redmine</a></li>
          <li class="divider" role="separator"></li>
          <li><a href="#">Logout</a></li>
        </ul>
      </li>
    </ul>

将菜单拆分为两个

ul

s。一个用于菜单，一个用于下拉菜单

<div class="menuwrap">
    <ul id="menu" class="nav nav-pills menu">
        ...<!-- This will contain all the menu items -->
    </ul>
    <ul class="nav nav-pills collect">
        ...<!-- This will contain the dropdown -->
    </ul>
</div>

其中：

$menu.width（）

获取菜单的宽度

varWidth

是所有菜单项的总宽度

ctr

是菜单项的数量

fitCount

获取超出菜单宽度的菜单项数

重置步骤8中归零的所有项目的宽度

$collectedSet

收集所有超出菜单宽度的项目

清空下拉菜单并添加克隆的已收集项目

将原始项目的宽度设置为零

这里有一把小提琴把这一切都放在一起：

注意：这适用于小型简单菜单和演示。对于较大的菜单，最好删除菜单项并移动到收集的下拉列表，而不是克隆和更改宽度。此外，它没有经过优化，在边缘情况下可能会出现一些问题。有了这个想法，你可以从这里对它进行微调

function collect() {
    elemWidth = $menu.width();
    fitCount = Math.floor((elemWidth / varWidth) * ctr) - 1;
    $menu.children().css({"display": "block", "width": "auto"});
    $collectedSet = $menu.children(":gt(" + fitCount + ")");
    $("#submenu").empty().append($collectedSet.clone());  
    $collectedSet.css({"display": "none", "width": "0"});
}