确定菜单项是否溢出，然后显示移动菜单

Question

我正在为我的网站构建一种新型的响应菜单，我认为这需要一些JavaScript。我不太擅长JavaScript，所以我希望有人能帮助我，提供指导、代码示例或链接到可以帮助提供解决方案的网站。

基本上，我有两个导航菜单，它们的内容几乎相同，只是第一个菜单在宽浏览器上查看时显示了所有链接。第一个菜单的包含div具有溢出：隐藏，这样，当浏览器调整大小并且不再足够宽以将所有列表项容纳在一行中时，一些列表项将在溢出时从视图中隐藏。第一个菜单也被设置为水平导航栏。

另一方面，第二个菜单是一个下拉菜单，它将通过单击"更多"链接来触发。第二菜单上的列表项被设置为display:none。

这就是我想要发生的事情。当第一个菜单上的列表项溢出，从而被隐藏时，我希望第二个菜单上相应的菜单项变为display:block。换句话说，如果

<li id="desktop_tenth">tenth</li>

隐藏，因为它不再适合包含的div，

<li id="mobile_tenth">tenth</li>

变得可见（单击"更多"链接时）。我可以在CSS3上使用媒体查询来完成这项工作，但JavaScript解决方案会更受欢迎，所以我希望有人能帮助我

<div style="overflow:hidden; width: 100%;">
    <ul id="desktop">
        <li id="desktop_first">first</li>
        <li id="desktop_second">second</li>
        ...
        <li id="desktop_tenth">tenth</li>
    </ul>
</div>
<div class="dropdown_menu">
    <a id="toggle" href="#">More</a>
    <ul id="mobile">
        <li id="mobile_first">first</li>
        <li id="mobile_second">second</li>
        ...
        <li id="mobile_tenth">tenth</li>
    </ul>
</div>

另一种方法是从开始

<div class="dropdown_menu">
    <a id="toggle" href="#">More</a>
    <ul id="mobile">
        <!--- no li inside this ul by default --->
    </ul>
</div>

无论李在第一个菜单得到隐藏（或包装）将附加到

<ul id="mobile">
</ul>

作为列表项。

Answer 1

为菜单的div（例如desktopMenu和mobileMenu）指定id，如下所示：

<div id="desktopMenu" style="overflow:hidden; width: 100%;">

这个：

<div id="mobileMenu" class="dropdown_menu">

并使用以下脚本：

var desktopMenu = document.getElementById('desktopMenu'), mobileMenu = document.getElementById('mobileMenu');
desktopMenu.style.display = 'none';
mobileMenu.style.display = 'none';
if (desktopMenu.offsetHeight < desktopMenu.scrollHeight || desktopMenu.offsetWidth < desktopMenu.scrollWidth) {
    mobileMenu.style.display = 'block';
} else {
    desktopMenu.style.display = 'block';
}

默认情况下，它会隐藏两个菜单，然后确定desktopMenudiv是否溢出。如果是，则显示移动菜单；如果不是，则显示桌面菜单。不过，使用jQuery的解决方案会干净得多。

Answer 2

以下是使用jQuery解决问题的方法。

我得到溢出的菜单项比较窗口中的顶部位置和菜单中第一个元素的顶部位置。

function getHiddenPosition() {
  var menuItems = $('ul#desktop > li');
  var length = menuItems.length;
  var position = 0;
  var top = $('ul#desktop > li').first().position().top;
  var nextLine = false;
  var currentTop;
  while ( !nextLine && position < length ) {
      currentTop = $(menuItems[position]).position().top;
      if ( currentTop > top ) {
      	nextLine = true;
      } else {
      	position++;
      }
  }
  return position;
}
function restartDropdown() {
  var length = $('ul#desktop > li').length;
  var position = getHiddenPosition();
  var mobileItems = $('ul#mobile > li');
  if ( position == length ) {
    $('.dropdown_menu').addClass('hidden');
  } else {
    $('.dropdown_menu').removeClass('hidden');
    $('ul#mobile > li').removeClass('hidden');
    for ( var i = 0; i < position; i++ ) {
      $(mobileItems[i]).addClass('hidden');
    }
  }
}
restartDropdown();
$(window).resize(restartDropdown);

div.dropdown_menu.hidden, div.dropdown_menu li.hidden {
  display: none;
}
div.inline_menu {
  overflow: hidden;
  width: 100%;
  height: 30px;
}
ul#desktop li {
  display: inline-block;
  height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inline_menu">
    <ul id="desktop">
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
        <li>Menu 4</li>
        <li>Menu 5</li>
        <li>Menu 6</li>
        <li>Menu 7</li>
        <li>Menu 8</li>
        <li>Menu 9</li>
        <li>Menu 10</li>
    </ul>
</div>
<div class="dropdown_menu hidden">
    <a id="toggle" href="#">More</a>
    <ul id="mobile">
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
        <li>Menu 4</li>
        <li>Menu 5</li>
        <li>Menu 6</li>
        <li>Menu 7</li>
        <li>Menu 8</li>
        <li>Menu 9</li>
        <li>Menu 10</li>
    </ul>
</div>