他のリストにリストを移動する

Question

だから私はこのようなhtmlを持っています。いくつかのクラスを明快に追加しましたが、その名前は無関係です。モバイルでは、「サブナビゲーション」を「モバイルの親」liの子にします。それはDOMの構造の中ではなく、LIの後に現れます。私は何が欠けていますか？ iveはjsで回っていて、うまくいきませんでした。

<ul class="main-nav"> 
    <li><a href="#">link 1</a></li> 
    <li><a href="#">link 2</a></li> 
    <li class="mobile-parent><a href="#">link 3</a></li> 
</ul> 

<ul class="sub-nav mobile-child"> 
    <li><a href="#">link 1</a></li> 
    <li><a href="#">link 2</a></li> 
</ul 

let trigger = document.getElementById('trigger'); 
let nav = document.querySelector('.site-navigation'); 
let mobileChild = document.querySelector('.mobileChild'); 
let mobileParent = document.querySelector('.mobileParent'); 

trigger.addEventListener('click', function(){ 
    trigger.classList.toggle('active'); 
    if (trigger.classList.contains('active')) { 
     nav.classList.add('active'); 
    } else { 
     if (nav.classList.contains('active')) { 
      nav.classList.remove('active'); 
     } 
    } 
}); 

if (window.innerWidth < 768) { 
    mobileParent.appendChild(mobileChild); 
} 

Answer 1

media queryを使用すると、さまざまなデバイスの要素を表示および非表示にできます。

以下のコードを参照してください。また、this postも参照してください。

.mobile-child-outer{ 
 
    display:block; 
 
} 
 
.mobile-child{ 
 
    display:none 
 
} 
 
@media screen 
 
and (device-width: 360px) 
 
and (device-height: 640px) { 
 
    .mobile-child-outer{ 
 
    display:none; 
 
    } 
 
    .mobile-child{ 
 
    display:block 
 
    } 
 
}

<ul class="main-nav"> 
 
    <li><a href="#">link 1</a></li> 
 
    <li><a href="#">link 2</a></li> 
 
    <li class="mobile-parent"><a href="#">link 3</a> 
 
    <ul class="sub-nav mobile-child"> 
 
     <li><a href="#">link 1</a></li> 
 
     <li><a href="#">link 2</a></li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 

 
<ul class="sub-nav mobile-child-outer"> 
 
    <li><a href="#">link 1</a></li> 
 
    <li><a href="#">link 2</a></li> 
 
</ul>

更新 あなたはJSソリューションをしたい場合は、以下試してください。しかし、私はあなたがCSSでそれを達成できるので、JSはこれのための最善の解決策ではないと思います。

window.addEventListener("resize", addSubNav); 
function addSubNav(){ 
    var width = document.body.clientWidth; 
    if (width < 768) { 
    document.querySelector('.mobileParent .mobile-child').remove(); 
    mobileParent.appendChild(mobileChild); 
    } 
}