Question

我想在bootstrap中创建megamenu。

（像jsfiddle.net/apougher/ydcMQ/这样的东西）。但这些项目并未预先定义......它们本质上是动态的。所以我不能在<ul><li>中使用一些固定的项目。所以我正在寻找一种动态方法，在一个<li>元素下定义多个<ul>项，并且需要修复高度。一旦高度超过限制，下一列<li>元素应该出现在下一列中，等等......可以这样做吗？

编辑：基本上我正在寻找一种固定高度和每列宽度固定的方法。如果线的数量超过固定高度，它们应自动进入下一列。例如：如果高度为400px，只允许10行（仅举例）。如果我写25行......它应自动跨越3列，第一列有1-10行，第二列有11-20行，第三列有21-25行。

Answer 1

您可以使用上述任何功能将<li>动态附加到列表

prepend - 它将一个li作为第一个孩子插入ul。

或append - 它会将li作为最后一个孩子插入。

var new_task = "Your text here";

您可以使用

$('ul').append('<li>'+new_task+'</li>');

或

$('ul').append('<li>'+new_task+'</li>');

检查Fiddle

Answer 2

我忘了发布我是如何解决这个问题的。发布我在下面采用的方法。

我没有找到一个干净的方法来做到这一点。所以这就是我做的事情

我创建了一个带有固定列的表格（例如：25％）。我正在计算添加<li>个元素的数量。每当计数超出限制（例如10）时，再向表中添加一列并在其中添加，而不是添加现有列。添加新列后，重置计数器，以便我可以在其中添加10个<li>元素。有了上述内容，我可以在4列中添加最多40个<li>个元素。就我而言，这个限制已经足够了。

我知道这是一种愚蠢的方式......但我无法想出更清洁的方式。

由于

Bootstrap mega菜单多行固定高度

2 个答案: