1

我已经搜索并没有找到我要找的东西，我想做的是：

<main class="content">
    Content
    <nav class="search">
    </nav>
</main>

并在某个媒体查询中将其更改为

<main class="content">
    Content
</main>
<nav class="search">
</nav>

这可能吗？感谢您的任何帮助！

4

3 回答 3

0

您可以使用insertAfter删除元素并在特定元素之后重新插入。

要从媒体查询中处理此问题，您可以使用Modernizr 的 mq 方法。它比 window.watchMedia() 有更好的浏览器支持。它支持所有可以理解 CSS 媒体查询的浏览器。

   if (Modernizr.mq('(max-width: 320px)')) {
       $(".search").insertAfter(".content");
   } else {
    //...
   }
于 2015-12-31T01:18:09.157 回答
0

通常，我尝试将 HTML 构建得足够好，以便与媒体查询相关的任何内容都在 CSS 中处理。我不确定你的 HTML 是什么样的，但我最近知道了这个window.matchMedia()方法，所以我认为你可以使用它。

jQuery

if (window.matchMedia("(min-width: 400px)").matches) {
  $(".search").insertAfter(".content");
} else {
  $(".search").appendTo(".content");
}
于 2015-12-31T01:09:04.837 回答
0

尝试insertAfter

jQuery(function($) {
  $(".search").insertAfter(".content");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="content">
  Content
  <nav class="search">
  </nav>
</main>

于 2015-12-30T23:40:57.927 回答