根据窗口大小合并或取消合并项目列表

Posted 2021-02-23

For side by side ULs that become too wide on small screens/devices.
The following script let you merge or unmerge ULs depending on the size of the screen/device.

Works with jQuery

var mergeLists = {
 
	triggerWidth : 768,
 
	listsContainer : $('.container'),
 
	init : function(){
 
		if($(window).width() <= this.triggerWidth){
 
			this.listsContainer.each(function(i){
 
				var listFirst = $(this).find('ul:first-child'),
				listSecond = $(this).find('ul:nth-child(2)');
 
				if(!listSecond.is(':hidden')){
 
					var list = listSecond.find('li');
 
					$(list).addClass('second');
					listFirst.append(list);
					listSecond.hide();
				}
			});
		}else{
			this.listsContainer.each(function(i){
 
				var listFirst = $(this).find('ul:first-child'),
				listSecond = $(this).find('ul:nth-child(2)');
 
				if(listSecond.is(':hidden')){
					listSecond.append($(this).find('li.second'));
					listSecond.show();
				}
			});
		}
	}
}
mergeLists.init();
$(window).resize(function(){
	mergeLists.init();
});
 
<div class="container">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
 
.container ul{
display: table-cell;
}