当元素不再适合容器时执行JavaScript

Question

我正在创建一个应该响应的Web应用程序。 为了更加直观地显示它，我目前正在重新创建Microsoft在其产品中使用的OfficeUI功能区，然后在Web应用程序中使用。

在功能区中，当屏幕上显示所有选项卡时，您将看到类似以下内容的内容：

现在，当您调整窗口大小以使所有选项卡不再可见时，您将看到以下内容：

您可以清楚地看到区别，它是右侧的按钮，用于浏览所有各个选项卡。

现在，该按钮将始终放置在网站上，但只是隐藏起来，通过一些JavaScript函数，我将使其可见。

但是现在，如何知道在什么时候我需要使按钮可见。

假定以下简单的无序列表：

<ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
<ul>

就像所提供的图像中一样，所有LI元素都彼此相邻放置，如果我将窗口的大小调整为所有LI元素都不适合容器的宽度，则将下一个元素下推。 我知道这可以通过溢出和空格解决，但这不是这里的问题。

我仅需要6个LI元素不再适合其容器时，才需要JavaScript函数来执行函数。

这是一个小提琴 ，请尝试一下。

我希望任何人都可以给我一些指导。

Answer 1

您可以通过检查列表的scrollWidth是否大于其offsetWidth 。

请参阅https://jsfiddle.net/maryisdead/bfrzuaoy/或以下示例（在整页模式下测试）。

 (function ($) { var list = $('ul')[0]; $(window).on('resize', function(e) { if (list.offsetWidth < list.scrollWidth) { $('p').text('items hidden'); } else { $('p').text('all items visible'); } }); }(jQuery)); 

 ul { border: 1px solid; margin: 0px; list-style: none; overflow: hidden; padding: 0px; white-space: nowrap; } li { border: 1px solid #d4d4d4; display: inline-block; min-width: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li>Tab 1</li> <li>Tab 2</li> <li>Tab 3</li> <li>Tab 4</li> <li>Tab 5</li> <li>Tab 6</li> </ul> <p></p> 

Answer 2

(function ($) {
    $(window).on('resize', function(e) {
        var window_width = $(window).width();
        var tabsWidth = 0;
        $('li').each(function() {
           tabsWidth += $(this).width()*1;
        });

        if (tabsWidth > window_width) {
         // alert('do something');           
        }
    });
}(jQuery));

检查小提琴https://jsfiddle.net/hhtjrL59/1/

Answer 3

一个非常简单的版本：在页面加载时获取<ul>元素的总宽度，将其保存到变量中，然后在页面调整大小时进行比较：

 w = $('ul').width(); $(window).on('resize', function(e) { var newW = $(window).width(); if (newW <= w) { alert('code time'); } }); 

 ul { list-style: none; padding: 0px; margin: 0px; } li { display: inline-block; min-width: 100px; border: 1px solid #d4d4d4; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li>Tab 1</li> <li>Tab 2</li> <li>Tab 3</li> <li>Tab 1</li> <li>Tab 2</li> <li>Tab 3</li> <ul> 

Answer 4

对于媒体查询：使用JS来测量<li>并生成媒体查询：

https://jsfiddle.net/hhtjrL59/3/

width = null

$(document).ready(function() {
    $("li").each(function(idx, li) {
        width += $(li).width()
    });

});

document.querySelector('style').textContent +=
     "@media screen and (max-width:" + width + "px) { #holder { background-color: red; }}"

使用此HTML：

<ul id="holder">
    <li>Tab 1 f</li>
    <li>Tab 2 ghe</li>
    <li>Tab 3 fds</li>
    <li>Tab 4 wr</li>
    <li>Tab 5 wer3</li>
    <li>Tab 6 3r</li>
<ul>