Javascript 两个<；导航>；元素-桌面与移动

根据我的研究，似乎可以接受使用两个

元素来处理具有辅助菜单或子菜单的内容。这是可以理解的

但是，如果使用两个具有相同链接的

元素来区分台式机和移动设备的差异，又会怎样呢？这被认为是不好的做法，或者这样做有任何缺点（处罚）？我知道这会违反“干”编码，但还有别的吗

---

**背景-我正在考虑这种方法，因为我似乎无法让移动菜单（通过点击汉堡按钮激活）进入和退出，并且如果浏览器因任何原因调整大小，仍然可以正常运行。我觉得不太可能发生调整大小的情况，但在尝试使用“可见性”属性、或“显示”属性、或jQuery“淡出”和Javascript“动画”时，如果不复制

元素，并且不针对其中一个元素，我会遇到错误。旁注，我可以用一个

和任何一个“幻灯片”效果使其正常工作，只需尝试实现“淡入”效果。

根据我的经验，为了重新定位/视觉样式化桌面/手机而复制一个元素几乎是不必要的

相反，保留nav容器一次，或者使用两个版本的链接，或者使用媒体查询重新定位/重新设置元素的样式

请记住，使用纯CSS来处理屏幕大小和响应，还有一个额外的好处，即不必监听窗口大小调整事件，从而使您的网站更快，工作更轻松

<nav>
<ul class="links">
  <li>
    <a href="#">link one</a>
  </li>
</ul>
<ul class="links mobile">
  <li>
    <a href="#">link one</a>
  </li>
</ul>
</nav>

如果你提到要制作一份汉堡包菜单，我强烈建议你使用工作正常的菜单。（淡入淡出可以通过附加的淡入淡出HTML类轻松实现）

我在下面添加了一个片段，显示了引导汉堡菜单，但实现了淡入淡出

切换导航










导航标题

通常，如果移动导航和全宽导航所需的标记不同，或者导航标记需要位于不同的位置（使用第三方插件进行屏幕外导航是一个用例），我会很乐意在我的页面上放置两组标记。除了这两种情况，我几乎总是会尝试重用我的标记。

这个问题是基于观点的，或者需要讨论，因此对于堆栈溢出来说，这是离题的。实际上，你可能应该使用过渡，而不是淡入淡出效果的动画。不要让你最初的问题脱轨，但你所经历的褪色问题正是SO所擅长的。如果您能一起获得一个最小的演示，我相信我们可以帮助您找出如何将其减少到一个

nav

，并具有淡入淡出效果。您正在询问两个不同的广泛主题，但没有对您面临的问题提供清晰、简短和简洁的描述。听起来，前端开发人员很容易解决您的问题，但您必须提供代码示例/提琴/代码片段（最好是后者）@Paulie_D-对不起，我不是有意离题。我不认为询问“缺点”是什么会是一种意见。我从未考虑过这种方法。这可能行得通。我将把我的问题的几个例子放在一起分享，并在此过程中进行测试。我会很快让你知道这是否有效。在我的代码片段中，CSS魔法隐藏在加载的bootstrap.min.CSS文件中，但是如果你想了解它的机制，请告诉我，我会编辑我的回复。我正在尝试将导航定位在两个不同的位置。谢谢分享！