Javascript 水平堆叠图标，响应迅速

在这方面需要帮助，我找不到任何其他解决方案

基本上我需要的是有一个图标列表水平调整屏幕宽度

因此，如果我有七个图标水平，那么当我在平板电脑中时，不合适的图标将转到某个具有滑动和向下效果的分区

因此，如果ipad只显示6个图标，那么第七个图标将出现在div上

我有一张图片可以说明

在这方面我真的需要帮助，谢谢奥利弗

这是一个有点宽泛的问题，因为有几种方法可以解决这个问题。我相信有一两个图书馆可以帮助你完成这项工作。如果你计划自己做，你会希望从以下任务开始

当屏幕大小改变时检测。这可以通过计时器或使用window.onresize事件来完成

一旦屏幕大小改变，您需要检查按钮元素及其包装，以确定哪些元素不再出现在屏幕上

最后，您需要将这些溢出元素移动到辅助导航菜单

为了帮助您入门，我使用jQuery编写了一个简单的示例来完成此任务。请参阅本文底部的JSFIDLE，以获取完整的工作示例

$(document).ready(function() {
    // Get reference to our static elements 
    // one time at load for performance
    var $nav = $('nav');
    var $primaryList = $nav.find('.primary-list ul');
    var $overflowList = $nav.find('.overflow-list ul');
    var $overflowButton = $('#show-overflow');

    // Bind our overflow toggle for the overflow list
    $overflowButton.click(function() {
        $nav.toggleClass('show-overflow');
    });

    // Bind our resize event so we know when
    // viewport size changes
    $(window).resize(function() {
        // Find our last item in primary list
        var $pl = $primaryList.find('li:last');
        // Figure out the right side of our last element
        var x = $pl.position().left + $pl.outerWidth();
        var listWidth = $primaryList.innerWidth();
        // Check to see if this is outside of our menu
        if (x > listWidth) {
            // Since this is outside we move it to overflow
            $pl.prependTo($overflowList);
            // Show our overflow button
            $overflowButton.show();
        } else {
            // Since this didn't overflow lets see if we have enough
            // room to move an overflow element back to the primary list
            var $ol = $overflowList.find('li:first');
            // Check to see if we found an overflow element
            if ($ol.length > 0) {
                // Check to see if this one will fit
                if (x + $ol.outerWidth() <= listWidth) {
                    // Move it back to the primary list
                    $ol.appendTo($primaryList);
                }
            } else {
                // Hide our overflow button
                $overflowButton.hide();
            }
        }
    }).resize();
});

$（文档）.ready（函数（）{
//获取对静态元素的引用
//一次负载性能测试
var$nav=$（'nav'）；
变量$primaryList=$nav.find（'.primary-list-ul'）；
var$overflowList=$nav.find（'.overflow-list-ul'）；
var$overflowButton=$（“#显示溢出”）；
//为溢出列表绑定溢出切换
$overflowButton。单击（函数（）{
$nav.toggleClass（'show-overflow'）；
});
//绑定我们的调整大小事件，以便我们知道何时
//视口大小更改
$（窗口）。调整大小（函数（）{
//找到主列表中的最后一项
var$pl=$primaryList.find（'li:last'）；
//找出最后一个元素的右侧
var x=$pl.position（）.left+$pl.outerWidth（）；
var listWidth=$primaryList.innerWidth（）；
//看看这是否在我们的菜单之外
如果（x>listWidth）{
//因为它在外面，所以我们把它移到溢出位置
$pl.prependTo（$overflowList）；
//显示我们的溢出按钮
$overflowButton.show（）；
}否则{
//既然没有溢出，让我们看看是否有足够的
//将溢出元素移回主列表的空间
var$ol=$overflowList.find（'li:first'）；
//检查是否发现溢出元素
如果（$ol.length>0）{
//看看这个是否合适
如果（x+$ol.outerWidth（）没有您正在构建的代码示例，很难在目标上回答这样的问题。有无数种方法可以实现这样的结果。因此，我将尝试用我能想到的最简单的代码回答您（没有JS，只有内嵌CSS和HTML）

请尝试下面的代码段：



A.
B
C
D
E
你能展示一下你的代码吗？你好，我这几天一直在努力想办法解决这个问题，谢谢，没问题，奥利弗。祝你好运！对不起，我不能呕吐，因为我还需要15个声誉