Question

我在同一行上有一个徽标列表（静态）和页眉（此更改）。我想动态调整页面标题未被占用的左侧空间中的徽标（在空间中显示太多）。

方法：

首先隐藏徽标

1。）leftoverSpace = containerWdith - pageheaderWidth
2.）循环每个徽标宽度
3.）一旦'leftoverSpace'号码被击中，循环停止。

这是我到目前为止所得到的：它不正确，但我在努力。

var pageheaderWidth = null;
brandsbannerWidth = null;
pageheaderWidth = $(".page_header h1").width()
pageheaderWidth = pageheaderWidth + 40;    

brandsWidth = (960-pageheaderWidth)-10

$(".brands_banner li").each (function(index) {

brandsbannerWidth = $(this).width();

if(brandsbannerWidth == brandsWidth) 

$(this).show();

});

非常感谢帮助。提前谢谢。

Answer 1

不看你的代码，很难提供一个好的答案。

我会说你需要这样的东西：

var logos = $('.logos');

logos.hide();

$.each(logos, function () {

    var containerWidth = ...//define your variable here
    var pageheaderWidth = ...//define your variable here

    leftoverSpace = containerWidth - pageheaderWidth

    if (leftoverSpace == yourThresholdHere) {
         return false;
    }

    $(this).show();
});

<小时/> 的修改

立即查看您的编辑内容：

var pageheaderWidth = $(".page_header h1").width() + 40 //no need to declare it previously 
var brandsWidth = (960-pageheaderWidth)-10

$(".brands_banner li").each (function(index) {
      (condition here)
});

Answer 2

简单溢出：隐藏正确。我有一些想法，溢出不会隐藏整个元素，只是它的一部分。

循环遍历元素的宽度并显示元素，直到达到某个宽度

2 个答案: