Question

我有一个由div制成的自定义盒子。这样，我就以无序列表的形式从字符串数组中填充了数据。此框的大小固定，因此如果整个数据都不能解决该问题，则会出现问题。

Box
---------------- 
| * First      |
| * Second     |
| * Third      |
----------------

三个以上的元素不适合该框。为此，我显示了更多按钮，它将重定向到更多元素。

Box
---------------- 
| * First      |
| * Second     |
| More >       |
----------------

在这里，我想根据剩余空间显示更多按钮。因为可能是这种情况

Box
---------------- 
| * First point|
| is long      |
| More >       |
----------------

最好的方法是什么？

Answer 1

我认为最好将数组中的所有项目添加到DOM中，然后计算盒子的高度。如果包装盒的大小没有足够的空间容纳按钮和物品，则需要一个一个地移除物品。

这是我的方法：

let buttonHight = $('button').outerHeight();
  let boxInnerHeight = $('.box').height() - parseInt($('.box').css('padding-top')) - parseInt($('.box').css('padding-bottom'));
  let listHeight = $('.list').outerHeight();
  
	
	
	while(boxInnerHeight - buttonHight < listHeight){
	
	$('p').last().remove();
	
	buttonHight = $('button').outerHeight();
	boxInnerHeight = $('.box').height() - parseInt($('.box').css('padding-top')) - parseInt($('.box').css('padding-bottom'));
	listHeight = $('.list').outerHeight();
	
	$('button').css('display','block');
	
		
	}
	$('p').each(function(item){
		$(this).css('opacity','1');
	})

.box{
  width: 150px;
  height: 200px;
  background-color: #bbbbcc;
  padding:10px;
  position: relative;
}

.list p{
	opacity: 0;
	margin: 0 0 10px 0;
}
.list button{
	display:none;
  height: 25px;
  position:absolute;
  bottom:10px;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <div class="list">
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vulputate sem non vehicula euismod. Vestibulum feugiat vel nisi et iaculis. Phasellus ut varius sem.</p>
    
    <button>see more</button>
  </div>
</div>

有没有一种方法可以根据制造的盒子中剩余的空间来显示按钮

1 个答案: