Question

我需要另外一双眼睛，谢谢你的时间。我有一个基于Zurb Foundation的商务模板，它根据页面的宽度使用jQuery移动几个元素。我遇到了麻烦，可能是由于对基础数学的无知，我可以用一只手。

相关的jQuery是一个在doc ready和resize上触发的函数：

function organize() {
    var welcome = $('#welcome').remove();
    var sidebar = $('#sidebar');
    var innerwidth = $('body').innerWidth();

    // Move the Welcome DIV - we ALWAYS do this
    welcome.appendTo('#content-wrap');

    // If we're mobile, let's move a few things around
    if( innerwidth < 768 ) {
        if (!sidebar.hasClass('mobile')) {
            var sidecut = sidebar.addClass('mobile').detach();
            sidecut.prependTo('#content-wrap')
        }
    }
    // If we've gone bigger, put things back where we found them
    if( innerwidth >= 768) {
        if (sidebar.hasClass('mobile')) {
            var sidefix = sidebar.removeClass('mobile').detach();
            sidefix.insertAfter('#primary');

        }
    }
}

正如您所看到的，使用768px断点我将侧边栏移动到顶部而不是底部，否则它将根据源顺序堆叠。我也尝试过document.width，但innerWidth似乎给出了额外的容差像素。虽然休息时间是768，但我一直有CSS问题直到785，此时一切都会自行解决。

CSS的相关位在这里（SCSS格式）

// Shop Menu
#shopmenu {
  ul {
    list-style: none;
    margin: 0 0 80px 0;
    padding: 0;
    @include display;
    li {
      background: $level-4;
      font-size:20px;
      border-bottom: 1px solid $level-3;
      &:first-child {
        padding: 0 10px;
        font-size: 22px;
      }
      &:last-child {border-bottom: none;}
      a {
        color: rgb(25,25,25);
        padding: 0 20px;
        &:hover {
          text-decoration: underline;
        }
      }
      ul {
        margin: 0;
        padding: 0;
        ul {
          padding-left: 25px;
          ul {
            padding-left: 30px;
            ul {
              padding-left: 35px;
            }
          }
        }
      }
      li {
        background: $level-4;
        font-size:17px;
        &:first-child {
          padding: 0;
          font-size: 20px;
        }
        a {
          padding: 0 30px;
          font-size: 16px;
        }
        li {
          border: none;
        }
      }
    }
  }
}

除了调整一些填充之外，我在CSS中没有做太多的断点，这不是问题（它持续存在而没有那部分）。这包括检查＃content-wrap ul.products li的附加断点，其中我更改％width以证明LI based on this technique的合理性。同样，即使我去了一个没有样式的列表，问题仍然存在。

希望有人在我4小时醒来的时候发现我的derp。

Answer 1

快速解决方案是将float:left;添加到<li>元素而不是display:inline-block;

使用display:inline-block的问题是元素之间添加的空格，此属性在元素之间添加了4 px空间。

Answer 2

感谢您查看此内容。最终，我设法找到了解决方案，删除了用于移动元素块的所有jQuery并手动跟随它们的指示。就在那时，我记得Foundation推/拉类实际上触发了他们自己的基于JS的源代码，这与我的其他指示相冲突。

我最终重构了脚本（无论如何需要）将“移动”类放在主体上，然后从那里我给出了指令，不仅要适当地移动项目，还要添加addClass（）或removeClass（） / pull Foundation命令。

// We need a function to add and remove the mobile class based on width
function setmobile() {
    thewidth = $(document).width(); // refresh this value when setting anew
    if (thewidth < 768) {
        thebody.addClass('mobile');
    } else {
        thebody.removeClass('mobile');
    }
}


// The source order is not the display order, let's play
function organize() {
    // Move the Welcome DIV - we ALWAYS do this
    var welcome = $('#welcome').remove();
    welcome.appendTo('#content-wrap');

    // If we're mobile, let's move a few things around
    if (!thebody.hasClass('mobile')) {
        var sidemain = sidebar.detach();
        sidemain.insertAfter('#primary');
        sidebar.addClass('pull-9');
        primary.addClass('push-3');
    }

    // If we've gone bigger, put things back where we found them
    if (thebody.hasClass('mobile')) {
        var sidemobile = sidebar.detach();
        sidemobile.insertAfter('#navwrap');
        sidebar.removeClass('pull-9');
        primary.removeClass('push-3');
    }
}

之后，在页面就绪时运行setmobile（）和organize（）以及调整大小时的debounce脚本是一件简单的事情。

在手机中移除了.push-3和.pull-9但在桌面模式下添加了，整个过程按预期工作。

响应元素不会在768和785像素之间堆叠

2 个答案: