在子导航中换行导航

Wrap navigation in a subnavigation

本文关键字：导航 换行      更新时间：2023-09-26

我有一个动态创建的导航，我无法在其中制作用于导航的父/子列表。

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

例如，如果我有元素列表1，列表2，列表3，.....列表10.

它将显示为列表1，列表2，列表3，更多...其余的链接将是更多...

我

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

  1. 如何在子列表周围添加 UL。
  2. 有时"更多..."被中断到下一行。

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

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上上述示例，单击"更多..."切换子项可见性

示例代码

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

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在完成此操作后继续运行。

相关文章：