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显示或隐藏其中一个菜单。

＆＃13;

$(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');
    }
  }
});

＆＃13;

*{box-sizing: border-box;}

.header-content, .site{
  float: left;
  width:50%;
  background: gray;
  height: 300px;
  padding: 30px;
}

.site{border-left: 2px solid white;}

＆＃13;

<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>

＆＃13;

Answer 2

在更改浏览器宽度时，重复触发调整大小事件。基本上要解决这个问题，你需要有一些指示，说明要附加的函数已经被触发并在完成后停止触发。

调整大小时，将li从嵌套ul移动到顶级ul会产生大量的lis

2 个答案: