javascript - 如何在特定浏览器宽度下更改标签

Question

我有这段代码可以创建一个下拉登录框:

<li id="login-link"><a href="javascript:;" onclick="$('#login-link').toggleClass('open');">SIGN IN</a>

但是，当调用移动宽度媒体查询时，它会附加到汉堡菜单，这并不理想。我的问题是 - 有没有一种方法可以重构它，将这个下拉登录框更改为移动宽度的简单标签 ( <a href="signin"></a>)？

谢谢!

Answer 1

我会复制 <li id="login-link">...</li>元素并创建一个类以根据媒体查询显示/隐藏它们。可能是这样的:

@media only screen and (max-width: 599px) {
  .mobile-only {
    display: inherit;
  }
  .desktop-only {
    display: none;
  }
}

@media only screen and (min-width: 600px) {
  .mobile-only {
    display: none;
  }
  .desktop-only {
    display: inherit;
  }
}

<li id="login-link mobile-only"><a href="javascript:;" onclick="$('#login-link').toggleClass('open');">SIGN IN (MOBILE)</a>

<li id="login-link desktop-only"><a href="signin">SIGN IN (DESKTOP)</a>

我会考虑使用 Bootstrap对于这样的事情也是如此。