Question

我正在创建一个应该响应的Web应用程序。为了更多地将其可视化，我正在重新创建Microsoft在其产品中使用的OfficeUI功能区，然后再用于Web应用程序。

在功能区中，当屏幕上显示所有选项卡时，您会看到如下内容：

enter image description here

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

enter image description here

您可以清楚地看到差异，右侧的按钮用于浏览所有各种标签。

现在，按钮将始终放在网站上，但只是隐藏，通过一些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元素都不适合容器的宽度，则下一个元素被向下推。我知道这可以通过溢出和空白来解决，但这不是问题。

我需要一个JavaScript函数来执行一个函数，并且只有当6个LI元素不再适合它们的容器时才需要。

这是一个fiddle尝试一下。

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

Answer 1

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

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

＆＃13;

(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));

＆＃13;

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; 
}

＆＃13;

<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>

＆＃13;

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>

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

4 个答案: