Question

我有2个菜单。我想在屏幕尺寸<500px时显示menu1，在屏幕尺寸> 500px时显示menu2。另外，我必须使用detach（）函数，而不要使用hide（）这样的函数。

这是我的代码：

$(window).on('load resize', function(){
    if ( $("body").outerWidth() < 500) {
      $(".menu1").detach();
      $(".action-menu2").append($(".menu2"));
    }
    else {
      $(".menu2").detach();
      $(".action-menu1").append($(".menu1"));
    }
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<body>
  
  <div class="action-menu1">
    <p class="menu1">menu1</p>
  </div>

  <div class="action-menu2">
    <p class="menu2">menu2</p>
  </div>
  
</body>

Answer 1

根据此处的文档：jQuery detach，您必须在变量中分配分离的元素，以便以后可以将其重新插入DOM中。

您的代码将变为：

var menu1,
    menu2;

$(window).on('load', function(){
    menu1 = $(".menu1");
    menu2 = $(".menu2");
});

$(window).on('load resize', function(){
    if ( $("body").outerWidth() < 500) {
      if( menu1 ) {
          $(".menu1").remove();
      } else {
          menu1 = $(".menu1").detach();
      }
      $(".action-menu2").append(menu2);
    }
    else {

      if( menu2  ) {
          $(".menu2").remove();
      } else {
          menu2 = $(".menu2").detach();
      }

      $(".action-menu1").append(menu1);
    }
});

我没有测试此代码，但我想它应该可以工作。我知道它可以做得更好，但至少可以让您先行一步

jQuery：同时分离和追加

1 个答案: