在子导航中包装导航答案

【问题标题】：Wrap navigation in a subnavigation在子导航中包装导航
【发布时间】：2015-01-16 00:33:31
【问题描述】：

我有一个动态创建的导航，我无法为导航创建父/子列表。

我想根据可用空间在列表末尾添加一个名为“更多...”的链接。然后将所有剩余元素显示为 More...的子元素...

例如，如果我有元素 list1、list2、list3、..... list10。

它将显示为 list1、list2、list3、more... 其余链接将是 more... 的子链接。

我尝试为此创建一个脚本，我认为我非常接近。但我有以下两个问题：

如何在子列表周围添加 UL。
有时“更多...”会换到下一行。

以下是我的 JS 代码：

    $(document).ready(function() {
       var nav = $('ul');

       var more = '<li><a href="#">More...</a></li>';

       nav.prepend( more );

       var availableSpace = nav.innerWidth();
       var list = 0;
       var countedSpace = 0;

       $('li').each(function(){
          var current = $(this);
          countedSpace = countedSpace+current.outerWidth();
          if (countedSpace < availableSpace) {
             list++;
          }
       })

       var showInList = list; //Space available for xx no. of items.

       var newList = [];
       // Start at 2, don't include dynamically added more link.
       for (i = 2; i < showInList; i++) { 
           newList.push($(nav).find("li:nth-child("+i+")"));
       }

       newList.push(more);

       var childList = [];
       for (i = showInList; i <= nav.children().length; i++) { 
           childList.push($(nav).find("li:nth-child("+i+")"));
       }

       //nav.empty();
       nav.html(newList);

       $(nav).find("li:last-child").append(childList);
    });

jsfiddle：http://jsfiddle.net/alokjain_lucky/Lhh019ru/

【问题讨论】：

标签： javascript jquery

【解决方案1】：

1。如何在子列表周围添加 UL。

尝试创建一个 jquery UL 对象，然后将 li 项目附加到它。像这样：

var ulChildren = $("<ul/>").append(childList);
$(nav).find("li:last-child").append(ulChildren);

2。有时“更多...”会换到下一行。

发生这种情况是因为 li 子项可见并向右堆叠，请尝试添加

li ul{
     display:none;
}

在步骤 1 之后测试正确的布局。

这是 JSFiddle 上的上述示例，单击“更多...”以切换子项的可见性

Example code

【讨论】：

【解决方案2】：

我认为这将完成您正在寻找的内容：

var availableWidth= $('ul').innerWidth();

var totalWidth= $('<li class="more"><a href="#">More</a></li>').appendTo($('ul')).outerWidth();

$('li').each(function(index) {
  totalWidth+= $(this).outerWidth();
  if(totalWidth >= availableWidth) {

    $('ul li:eq('+(index-2)+')').after(
      $('.more').click(function() {
        $('ul li:gt('+(index-1)+')').toggle()
      })
    );

    $('ul li:gt('+(index-1)+')').css({
      display: 'none'
    });

    return false;
  }
});

var availableWidth= $('ul').innerWidth();

var totalWidth= $('<li class="more"><a href="#">More</a></li>').appendTo($('ul')).outerWidth();

$('li').each(function(index) {
  totalWidth+= $(this).outerWidth();
  if(totalWidth >= availableWidth) {

    $('ul li:eq('+(index-2)+')').after(
      $('.more').click(function() {
        $('ul li:gt('+(index-1)+')').toggle()
      })
    );

    $('ul li:gt('+(index-1)+')').css({
      display: 'none'
    });
    
    return false;
  }
});

ul {
  padding:0px;
  margin:0px;
  border:1px solid #ccc;
  overflow:hidden;
  width: 500px;
}

li {
  list-style:none;
  float:left;
  margin:10px;
  border:1px solid #f1f1f1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">a Home</a></li>
  <li><a href="#">b Services</a></li>
  <li><a href="#">c Meet our team</a></li>
  <li><a href="#">d work process</a></li>
  <li><a href="#">e About us</a></li>
  <li><a href="#">f Contact us</a></li>
  <li><a href="#">g Meet out team</a></li>
  <li><a href="#">h work process</a></li>
  <li><a href="#">i About us</a></li>
  <li><a href="#">j Contact us</a></li>
</ul>

totalWidth 被初始化为More 列表项的宽度。我给了它一个more的类，所以它可以在each中被引用。

当totalWidth 大于或等于availableWidth 时，.more 将插入ul 的适当位置（索引）。

click 处理程序切换列表项在较高位置的显示。然后隐藏那些位置较高的列表项。

return false 阻止 each 在完成后继续运行。

【讨论】：