在調整大小時，將li從嵌套ul移到頂層ul會創建大量lis

Question

我正在嘗試創建一個響應式菜單。 在移動版本上，我希望ul顯示4個列表項。 在調整為桌面大小時，將2個列表項附加到以前未使用的嵌套ul中。 這很好。 但是，如果我將大小調整為移動大小，而不是將2個列表項附加到頂級ul，則似乎會產生很多問題。

 $(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之類的現代框架提供了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> 

Answer 2

更改大小時，重復大小事件會在您更改瀏覽器寬度時反復觸發。 本質上，要解決此問題，您將需要具有一些指示符，以指示要追加的功能已被觸發，並在完成后停止觸發。