1

我正在为我的网站构建一种新型响应式菜单，我认为它需要一些 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>

第一个菜单上隐藏（或包装）的任何 li 都将附加到

<ul id="mobile">

</ul>

作为列表项。

4

2 回答 2

0

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

<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的解决方案会更干净。

于 2013-07-24T02:14:30.853 回答
0

这是使用 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>

于 2016-05-03T10:46:35.133 回答