1

我有一个带有十个一级链接的水平导航栏。在宽度至少为 1200 像素的浏览器上查看时，它们都排列得很好。当浏览器变得小于 1200 像素时，列表开始换行到第二行。这破坏了我设计的外观（从美学上讲）。作为对此的临时修复，我将导航栏的包含 div 设置为固定高度，宽度设置为 100%，并将溢出设置为隐藏，这样包裹到第二行的列表项将不会显示。

这就是我想要发生的事情，我希望你们能帮助我。我希望将进入第二行并被隐藏的列表项克隆并附加到另一个无序列表中。例如，如果链接 10 转到第二行，我希望将其克隆并附加到 .dropdown 无序列表中。如果链接 9 和链接 10 转到第二行，我希望它们都被克隆并附加到 .dropdown 无序列表中。

<div id="main-nav">
<ul class="horizontal">
<li id="one">link 1</li>
<li id="two">link 2</li>
<li id="three">link 3</li>
<li id="four">link 4</li>
<li id="five">link 5</li>
<li id="six">link 6</li>
<li id="seven">link 7</li>
<li id="eight">link 8</li>
<li id="nine">link 9</li>
<li id="ten">link 10</li>
</ul>
</div>

<div id="extra-nav">
<a href="#">Menu</a>

<ul class="dropdown">
<!-- this unordered list is initially empty, and will be populated by list items from main-nav -->
</ul>

</div>

具体来说，我的问题是：

  1. 如何确定列表项是否进入第二行，例如，如果 #nine 和 #ten 进入第二行，因为整个水平导航不适合包含 div 的宽度？

  2. 如何向每个列表项（即链接 10）添加自定义类（即 .dropdown-item）

    3. ) 仅当他们进入第二行时（如问题 1 所示）？

  3. 如何克隆给定自定义类 .dropdown-item 的那些项目并将它们附加到 ?

4

1 回答 1

2

你可以使用JQuerys 位置函数和高度函数

通过遍历每个导航链接，您可以检查它们中的任何一个的位置是否低于第一个链接的高度（假设第一个链接始终位于顶行）。

然后可以以任何方式修改该行下方的所有链接。它看起来像这样

var bottom_of_first_line = $('#one').height();
$('#main-nav li').each( function() {
   if($(this).position().top <= bottom_of_first_line)
   {   //move it or remove it or whatever  }
});
于 2013-07-25T02:21:06.010 回答