Question

我有一个菜单面板，其中包含动态数量的链接。

该面板的高度具有固定高度（可以更改），我想计算该高度可以容纳多少个链接元素。当达到最大链接数时，我希望链接列表能够自行清除并分成3个名为.left，.center和.right的列。这仅在链接编号超出可用高度的面板中发生。

链接的第一部分必须位于.left，超出链接然后应移至.center并且（最终）占用.right

这是我的html结构

<div class="right-menu-panel" style="height:250px">
  <div class="secondary-nav">
    <div class="menu-element">
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
    </div>
    <div class="menu-element">
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>

      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>

      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>

      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
    </div>
    <div class="menu-element">
      <a href="" class="secondary-menu-link">link</a>
    </div>
  </div>
</div>

在这种情况下，javascript只应在第二个<div class="menu-element">中执行操作，其中包含14个链接。

我已经开始使用这个JS但是我被困在这里：

var menuHeight = $(".right-menu-panel").outerHeight();
var menuItems = Math.max.apply(null, $('.secondary-nav > div').map(function() {
  return $(this).children().length;
}).get());

这个js让我知道哪个面板的div链接数最多..

这是一个小提琴：https://jsfiddle.net/3ea670fh/2/

我坚持这个，我不知道该怎么办。非常感谢任何帮助或建议。

我见过这个问题：One UL list split into multi columns with fixed height但css对我来说不是一个选项（IE8支持）。

非常感谢！

Answer 1

计算单列中的最大链接
超出链接，转到下一栏

data-prepend：链接超出时预先添加链接的下一列的ID

$.each(indexer, function(idx, elem) {
    var prepend = $(menuElements[elem]).attr('data-prepend');
    if ($(menuElements[elem]).children().length > maxItems) {
        var items = $(menuElements[elem]).children().slice(maxItems).detach();
        $('#' + prepend).prepend(items);
    }
});

这是一个小提琴

https://jsfiddle.net/SeokjunHong/q5frqrds/

拆分多列

1 个答案: