Плагин:
https://github.com/weblinc/jquery-columnlist
Плагин разделяет нормально на одинаковое количество li в каждом ul когда исходный список такой:
<ul class="column-list-js">
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
<li>Item #6</li>
<li>Item #7</li>
<li>Item #8</li>
<li>Item #9</li>
<li>Item #10</li>
<li>Item #11</li>
<li>Item #12</li>
</ul>
Но если список со вложенными ul li, например такой:
<ul class="column-list-js">
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3
<ul>
<li>Item #3.1</li>
<li>Item #3.2</li>
<li>Item #3.3</li>
<li>Item #3.3</li>
<li>Item #3.2</li>
<li>Item #3.3</li>
<li>Item #3.3</li>
</ul>
</li>
<li>Item #4</li>
<li>Item #5</li>
<li>Item #6</li>
<li>Item #7</li>
<li>Item #8</li>
<li>Item #9</li>
<li>Item #10</li>
<li>Item #11</li>
<li>Item #12</li>
</ul>
То если делать с помощью css список в несколько столбцов, например, в 2 столбца, то столбцы получаются не одинаковые, то есть вложенные ul li не учитываются.
Помогите исправить плагин, чтобы он учитывал вложенные ul li и формировал примерно одинаковые по высоте столбцы, однако чтобы вложенные ul li оставаличь в одном столбце, а не переносились в другой.
Для примера, ЧТОБЫ ДЕЛИЛ ВОТ ТАК:
<html><head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Воскресенск, юридическая консультация в Воскресенске</title>
<meta name="description" content="">
<style>
.column-list-js{ width:100%;position:relative;padding: 0 10px;border:1px solid #000;}
.column-list{ display: inline-block;width:50%;}
.column-listxxx-1{position:absolute;top:0}
.column-list li{ margin:15px 0}
.column-list-js li ul { margin-left: -25px;}
</style>
</head>
<body>
<ul class="column-list-js">
<li class="column-listxxx-0 column-list">
<ul>
<li>Пункт #1</li>
<li>Пункт #2</li>
<li>Пункт #3
<ul>
<li>Подпункт #3.1</li>
<li>Подпункт #3.2</li>
<li>Подпункт #3.3</li>
<li>Подпункт #3.4</li>
<li>Подпункт #3.5</li>
<li>Подпункт #3.6</li>
<li>Подпункт #3.7</li>
<li>Подпункт #3.8</li>
<li>Подпункт #3.9</li>
</ul>
</li>
<li>Пункт #4
<ul>
<li>Пункт #4.1</li>
<li>Пункт #4.2</li>
<li>Пункт #4.3</li>
</ul>
</li>
</ul>
</li>
<li class="column-listxxx-1 column-list">
<ul>
<li>Пункт #5</li>
<li>Пункт #6</li>
<li>Пункт #7
<ul>
<li>Подпункт #7.1</li>
<li>Подпункт #7.2</li>
<li>Подпункт #7.3</li>
<li>Подпункт #7.4</li>
<li>Подпункт #7.5</li>
<li>Подпункт #7.6</li>
</ul>
</li>
<li>Пункт #8</li>
<li>Пункт #9</li>
<li>Пункт #10</li>
<li>Пункт #11</li>
<li>Пункт #12</li>
<li>Пункт #13</li>
</ul>
</li>
</ul>
</body>
</html>
СЕЙЧАС ПЛАГИН ДЕЛИТ ВОТ ТАК:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Column Lists</title>
<meta name="description" content="">
<style>
.column-list-js{ width:100%;position:relative;padding: 0 10px;border:1px solid #000;}
.column-list{ display: inline-block;width:50%;}
.column-listxxx-1{position:absolute;top:0}
.column-list li{ margin:15px 0}
.column-list-js li ul { margin-left: -25px;}
</style>
</head>
<body>
<ul class="column-list-js">
<li>Пункт #1</li>
<li>Пункт #2</li>
<li>Пункт #3
<ul>
<li>Подпункт #3.1</li>
<li>Подпункт #3.2</li>
<li>Подпункт #3.3</li>
<li>Подпункт #3.4</li>
<li>Подпункт #3.5</li>
<li>Подпункт #3.6</li>
<li>Подпункт #3.7</li>
<li>Подпункт #3.8</li>
<li>Подпункт #3.9</li>
</ul>
</li>
<li>Пункт #4
<ul>
<li>Пункт #4.1</li>
<li>Пункт #4.2</li>
<li>Пункт #4.3</li>
</ul>
</li>
<li>Пункт #5</li>
<li>Пункт #6</li>
<li>Пункт #7
<ul>
<li>Подпункт #7.1</li>
<li>Подпункт #7.2</li>
<li>Подпункт #7.3</li>
<li>Подпункт #7.4</li>
<li>Подпункт #7.5</li>
<li>Подпункт #7.6</li>
</ul>
</li>
<li>Пункт #8</li>
<li>Пункт #9</li>
<li>Пункт #10</li>
<li>Пункт #11</li>
<li>Пункт #12</li>
<li>Пункт #13</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
// jquery.columnlist.js
// @weblinc, @jsantell (c) 2012
;(function( $ ) {
$.fn.columnlist = function ( options ) {
options = $.extend( {}, $.fn.columnlist.defaults, options );
return this.each(function () {
var
$list = $( this ),
size = options.size || $list.data( 'columnList' ) || 1,
$children = $list.children( 'li' ),
perColumn = Math.ceil( $children.length / size ),
$column;
for (var i = 0; i < size; i++) {
$column = $('<ul />').appendTo( returnColumn( i ) );
for ( var j = 0; j < perColumn; j++ ) {
if ( $children.length > i * perColumn + j ) {
$column.append( $children[ i * perColumn + j ]);
}
}
$list.append( $column.parent() );
}
});
function returnColumn ( inc ) {
return $('<li class="' + options.incrementClass + inc + ' ' + options[ 'class' ] + '"></li>');
}
};
$.fn.columnlist.defaults = {
'class' : 'column-list',
incrementClass : 'column-list-'
};
})( jQuery );
// настройки
$('ul.column-list-js').columnlist({
size : 2,
'class' : 'column-list',
incrementClass : 'column-listxxx-'
});
</script>
</body>
</html>