隐藏 DOM 元素与为响应式网站操作 DOM 元素？答案

【问题标题】：Hiding a DOM element vs manipulating DOM element for responsive website?隐藏 DOM 元素与为响应式网站操作 DOM 元素？
【发布时间】：2014-07-30 20:35:31
【问题描述】：

我想知道您会推荐哪种方法最适合响应式网站。该网站将使用 Zurb Foundation 和 jQuery 作为框架。

我知道有两种方法可以实现响应式导航。一种是简单地创建两种导航，一种用于大屏幕，另一种用于小屏幕（或手机）。它将根据屏幕大小使用媒体查询来显示和隐藏元素。

我正在考虑的另一种方法，不是在 DOM 中创建两种导航，而是使用单源 DOM 元素并随着屏幕大小的变化对其进行操作。我打算使用 jQuery 的resize()。随着屏幕大小调整为更小的屏幕，所有这些列表项都将放置在一个列表中，随着屏幕变大，它将扩展到不同的列表 (uls)。

我正在考虑的事情，我在想如果我做两种 DOM 元素，那将不实用，并且可能会使网站臃肿。同时，如果我将使用 javascript 来操作 DOM 位置，它可能不是一个流畅的体验（我仍然不确定）。

我想知道你的想法。

我的 DOM 元素看起来与此类似。

<header>

  <ul id="social-links" class="social-links">
    <li>Facebook</li>
    <li>Twitter</li>
  </ul>

  <ul id="profile">

    <li><span>Hello</span><span>John</span>
      <ul>
        <li>Profile</li>
        <li>Edit Settings</li>
        <li>Log Out</li>
      </ul>                
    </li>

  </ul>

  <nav>

    <ul>
      <li>Home</li>
      <li>Product</li>
      <li>Services</li>
      <li>Contact</li>
    </ul>

  </nav>

</header>


<ul class="mobile-alt-nav">

    <li class="greet"><span>Hello</span><span>John</span>
    <li>Profile</li>
    <li>Edit Settings</li>
    <li>Log Out</li>
    </li>

    <li>Home</li>
    <li>Product</li>
    <li>Services</li>
    <li>Contact</li>

    <li>Facebook</li>
    <li>Twitter</li>

</ul>

【问题讨论】：

标签： jquery responsive-design media-queries conventions

【解决方案1】：

您应该为此使用 CSS。

根据特定的 CSS 媒体查询创建您的类

more info on media queries here

【讨论】：

【解决方案2】：

你的想法是完全正确的。应尽可能避免复制 DOM 元素。

值得采取一种经过深思熟虑的方法来构建您的标记，以便尽可能在断点样式之间轻松转换。

但值得注意的是，在一些实例中，复制内容以避免 CSS 膨胀或删除对 Javascript 的要求可能是有益的。

在您的情况下，由于您正在考虑使用 Javascript 来避免重复，如果内容大小与您描述的大小大致相同，我建议您实际上复制标记。使用 Javascript 操作 DOM 节点的性能远远低于使用 CSS 隐藏/显示块的性能。

以这种方式添加 Javascript 来操作 DOM 会产生不必要的复杂性。如果您选择在此处不使用 Javascript 并复制内容，您的代码在浏览器中将更具可读性和可靠性。

搜索引擎优化影响

搜索引擎只会惩罚在同一页面上出现多次的内容，如果它看起来是垃圾邮件或试图堆砌关键字。但是，以您建议的方式简单地复制 DOM 元素不会产生影响。

我希望这会有所帮助。

【讨论】：