Question

我正在使用Vitakicks.com，你可以看到主导航菜单上的下拉太长，有些有40个条目。现在我想要如果项目数超过10，列拆分并生成另一列。我使用了一些开发人员在theme.liquid结尾处告诉的代码：

<script>
var maxRows = 6;
$('#menu > li.has-sub.level-1 > ul').each( function() {
var count = $(this).children().length;
var columns = Math.ceil(count/maxRows).toString();
$(this).css({
"-webkit-column-count": columns, 
"-moz-column-count": columns, 
"column-count": columns
 });
 });
 </script>

但这不适用于首演主题。那现在解决方案是什么？我怎么能这样做？

Answer 1

请使用以下代码将长列拆分为小列：

$("#SiteNav li ul").each(function(){
    var len = jQuery(this).find('li').length;
if(len > 9){

$.fn.extend(
{
    list2Columns: function(numCols)
    {
        var listItems = $(this).find('li'); /* get the list data */
        var listHeader = $(this);
        var numListItems = listItems.length;
        var numItemsPerCol = Math.ceil(numListItems / numCols); /* divide by the number of columns requires */
        var currentColNum = 1, currentItemNumber = 1, returnHtml = '', i = 0;
        var classname = $(this).parent().attr('id');

        /* append the columns */
        for (i=1;i<=numCols;i++)
        {
            $(this).parent().append('<ul class="column list-column-' +classname+ i + '"></ul>');
        }

        /* append the items to the columns */
        $.each(listItems, function (i, v)
        {    
            if (currentItemNumber <= numItemsPerCol){
                currentItemNumber ++;
            }
            else
            {
                currentItemNumber = 1;
                currentColNum ++;
            }
                $('.list-column-'+classname+currentColNum).append(v);
        });
        $(this).parent().addClass('expended-div');
        $(this).remove(); /*clean previous content */

    }
});


 $(this).list2Columns(3);

 }
});

并使用css .expended-DIV { 宽度：500像素 } .column {float：left; }

由于

在Shopify首次亮相主题中将下拉菜单拆分为多个列

1 个答案: