下拉菜单 - 将子项目除以2，并将它们分成两列

我有菜单，每个顶部都有子菜单，子项的数量是未知的，我想，如果有，例如，超过13个项目，然后，将它们除以2，并将它们放到一个容器中，作为列，我可以在这里用css3列计数，但是我需要javascript（jQuery）版本。下拉菜单 - 将子项目除以2，并将它们分成两列

 $('.sub-menu').each(function() { 
     var count = $(this).find("li").length; 
    if(count >= 12){ 
     $(this).addClass('col2'); 
    } 

    if(count >= 24){ 
     $(this).toggleClass('col2 col3'); 
    } 
});

现在我有这个，

enter image description here

我需要动态改变这个

enter image description here

这里是的jsfiddle

http://jsfiddle.net/3KB9j/12/

来源

2014-01-27 Hovhannes Sargsyan

像这样

working demo

CSS

.dropdown 
{ 
    font-size:16px; 
    font-weight:400; 
    line-height:40px; 
    text-indent:15px; 
    padding-right:15px; 
    vertical-align:middle; 
    display:inline-block; 
} 

.dropdown:hover 
{ 
    background-color:green; 
} 

.dropdown li ul { 
    display: none; 
    border:black 1px solid; 
    position:absolute; 
    background-color:white; 
    width: 150px;  
} 

.dropdown ul 
{ 
    list-style-type:none; 
    margin:0; 
    padding:0; 
} 


.dropdown a 
{ 
    display:block; 
    padding-right:15px; 
    line-height:30px; 
} 

.dropdown a:hover { 
    color: rgb(0,0,0); 
    text-decoration: underline; 
} 

.dropdown li:hover 
{ 
    background-color:green; 
} 

.second 
{ 
    left: 150px; 
}

来源

2014-01-27 07:21:16 falguni

我需要这样的，但必须生成.first和。第二个框子项后的子项目超过13，它们不包装之前 –

http://jsfiddle.net/3KB9j/14/

CSS

li.col2 { 
    float: left; 
    margin: 2px 4px; 
} 

.sub-menu.col2 { 
    width: 250%; 
}

jQuery的

$('.sub-menu').each(function() { 
     var count = $(this).find("li").length; 
     if (count >= 12) { 
      $(this).addClass('col2'); 
      $('li').addClass('col2'); 
     } 

     if (count >= 24) { 
      $(this).toggleClass('col2 col3'); 
     } 
    });

来源

2014-01-27 07:19:06 CRABOLO

谢谢，但我需要他们分开，并把他们分成两个独立的容器，例如前9个项目，放入第1列，其余部分放入第2列。我需要这种造型他们在将来 –

添加style="width:200px"李.sub-menu然后使用此：

$(".sub-menu li:odd").css("float", "left"); 
$(".sub-menu li:even").css("float", "right");

Working Fiddle

来源

2014-01-27 07:21:39

这不幸的是，在它的简单性，当@sarhov需要左列中的前13个值和右列中的最后一个值时，使用even和odd来替换项目。宽度样式也应该添加在CSS中，而不是内联。 –

下拉菜单 - 将子项目除以2，并将它们分成两列

回答

相关问题