リサイズでは、入れ子のulから最上位のulにliを移動すると、たくさんの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ユーティリティクラスを提供します。

簡単に言えば、cssの場合のみ、画面サイズに応じて2つのメニューを表示したり非表示にしたりできます。スニペットに変換

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

オンの場合、ブラウザの幅を変更すると、サイズ変更イベントが繰り返し発生します。基本的には、この問題を解決するには、追加する関数がすでに起動していることを示す指標と完了後に起動を停止する必要があります。