我连续放置了 16 个图标。但是当我减小窗口大小时,溢出的图标会折叠到下一行。
现在是这样的。 [
这就是我想要的样子。 [
应该 overflow hidden 的图标并显示一个查看所有按钮。单击按钮时,会弹出一个模式框。
我不知道从哪里开始。对于给定的窗口大小,有没有办法在 jQuery 中获取 div 的溢出子标记。
一些提示或想法将不胜感激。谢谢。
最佳答案
鉴于我们可以使用 jQuery:
我们需要计算一些东西,我们在页面加载和调整大小事件时执行初始函数。
首先,我们检查容器的宽度和元素的数量,我将每个元素占用的像素数量 (70) 乘以元素的总数来计算它们将占用的空间。如果元素太多(container <= items)
,我们取消隐藏查看更多,并隐藏所有元素。然后我们计算还剩多少空间(parseInt()
)减1,查看更多item)
之后,我们使用 .each()
函数取消隐藏所有适合的元素,我们停在我们在 space
中计算的索引处多变的。 else 语句取消所有隐藏,这意味着有足够的空间容纳所有元素。
function checkOverflow() {
var containerWidth = $('.container').width()
var itemLength = 70 * $('.item').length
if(containerWidth <= itemLength) {
$('.view-more').removeClass('hidden');
$('.item').addClass('hidden');
var space = parseInt(containerWidth / 70) - 1;
$('.item').each(function(i, el) {
if(i < space) {
$(el).removeClass('hidden');
}
})
}
else {
$('.view-more').addClass('hidden');
$('.item').removeClass('hidden');
}
}
checkOverflow();
$('.popup').hide().click(function() {
$('.popup').hide();
})
$('.view-more').click(function() {
$('.popup').show();
})
$(window).resize(function() {
checkOverflow()
})
.container {
display: inline-block;
background-color: #0FF;
width: 100%;
}
.popup {
position: absolute;
background-color: #00F;
top: 20%;
left: 5%;
right: 5%;
width: 90%;
margin: auto;
height: auto;
}
.item, .popup-item {
float: left;
width: 50px;
height: 50px;
background-color: #F00;
margin: 10px;
}
.view-more {
float: left;
width: 50px;
height: 50px;
background-color: #F00;
margin: 10px;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="view-more hidden">view more!</div>
</div>
<div class="popup">
<div class="popup-item"></div>
<div class="popup-item"></div>
<div class="popup-item"></div>
<div class="popup-item"></div>
<div class="popup-item"></div>
<div class="popup-item"></div>
<div class="popup-item"></div>
<div class="popup-item"></div>
<div class="popup-item"></div>
</div>
关于javascript - 随着窗口大小的减小,如何使用 jQuery 在查看更多按钮下 overflow hidden 的子元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41144186/