javascript - 在调整大小时，将 li 从嵌套的 ul 移动到顶级 ul 会创建很多 lis

Question

我正在尝试创建响应式菜单。在移动版本上，我希望 ul 显示 4 个列表项。在调整到桌面时，2 个列表项被附加到以前未使用的嵌套 ul。这很好用。但是，如果我将大小调整回移动大小，而不是将 2 个列表项追加回顶层 ul，它似乎会创建一堆 lis。

$(document).ready(function() {
  $('.has-child').click(function() {
    $(this).toggleClass('clicked');
    $('.has-child ul').toggleClass('clicked');
  });
});

$(window).on('resize', function() {
  if ($(window).width() >= 800) {
    $('.nav-container').detach().appendTo('.header-content');
    $('.has-parent').appendTo('.has-child ul');
  } else {
    $('.nav-container').detach().appendTo('.site');
    $('.has-parent').appendTo('.site-navigation ul');
  }
}).trigger('resize');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-container">
  <nav class="site-navigation">
    <ul>
      <li><a href="pageone.php">Home</a>
      </li>
      <li id="has-child" class="has-child"><a href="#"><i class="ion-person"></i></a>
        <ul>
        </ul>
      </li>
      <li class="has-parent"><a href="account.php">Account</a>
      </li>
      <li class="has-parent"><a href="logout.php">Logout</a>
      </li>

      <li><a href="logout.php">Login</a>
      </li>
      <li><a href="register.php">Register</a>
      </li>
    </ul>
  </nav>
</div>

提前致谢!

Answer 1

我想我已经按照你想要的方式工作了。

但是，我必须说这是一种有点奇怪的做事方式。现代框架，如 Bootstrap和 Foundation为 showing and hiding 提供 css 工具类菜单取决于正在播放的媒体查询。

简单来说，您可以有 2 个菜单，然后仅使用 css 根据屏幕大小显示或隐藏其中一个。

$(document).ready(function() {
  $('.has-child').click(function() {
    $(this).toggleClass('clicked');
    $('.has-child ul').toggleClass('clicked');
  });
});

$(window).on('resize', function() {
  if ($(window).width() >= 800) {
    $('.nav-container').detach().appendTo('.header-content');
    
    if($('.has-child ul li').length  == 0){
      $('.header-content .has-parent').detach().appendTo('.has-child ul');
    }
  } else {
    $('.nav-container').detach().appendTo('.site');
    
    if($('.site-navigation > ul > .has-parent').length  == 0){
      $('.site .has-parent').detach().appendTo('.site-navigation > ul');
    }
  }
});

*{box-sizing: border-box;}

.header-content, .site{
  float: left;
  width:50%;
  background: gray;
  height: 300px;
  padding: 30px;
}

.site{border-left: 2px solid white;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="header-content">
  <h4>Header Content</h4>

</div>

<div class="site">
 <h4>Site</h4>
  
</div>

<div class="nav-container">
  <nav class="site-navigation">
    <ul>
      <li><a href="pageone.php">Home</a>
      </li>
      <li id="has-child" class="has-child"><a href="#"><i class="ion-person"></i></a>
        <ul>
        </ul>
      </li>
      <li class="has-parent"><a href="account.php">Account</a>
      </li>
      <li class="has-parent"><a href="logout.php">Logout</a>
      </li>

      <li><a href="logout.php">Login</a>
      </li>
      <li><a href="register.php">Register</a>
      </li>
    </ul>
  </nav>
</div>