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

Question

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

基本上，我有两个导航菜单，它们的内容几乎相同，除了第一个菜单具有在宽浏览器上查看时可见的所有链接。第一个菜单的包含 div 有 overflow:hidden，这样当浏览器调整大小时不再足够宽以在一行中容纳所有列表项时，一些列表项将在溢出时从 View 中隐藏。第一个菜单的样式也是水平导航栏。

另一方面，第二个菜单是一个下拉菜单，将通过单击“更多”链接触发。第二个菜单上的列表项设置为 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>

第一个菜单中隐藏(或包装)的任何 li 都将附加到

<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';
}

默认隐藏两个菜单，然后判断desktopMenu div是否溢出。如果是，则显示移动菜单，如果不是，则显示桌面菜单。使用 jQuery 的解决方案不过会干净得多。