Question

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

我想添加名为＆＃34;更多...＆＃34;的链接根据可用空间，在列表的末尾。然后将所有剩余元素显示为更多的孩子......

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

它将显示为list1，list2，list3，more ......其余的链接将是更多的孩子......

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

如何在子列表周围添加UL。
有时＆＃34;更多......＆＃34;被打破到下一行。

以下是我的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/

Answer 1

<强> 1 即可。如何在子列表周围添加UL。

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

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

<强> 2 即可。有时＆＃34;更多......＆＃34;被打破到下一行。

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

li ul{
     display:none;
}

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

以上是关于JSFiddle的上述示例，点击＆＃34;更多...＆＃34;切换儿童可见性

Example code

Answer 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;
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

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

return false阻止each一旦完成就继续运行。

在子导航中包裹导航

2 个答案: