Question

所以我有一些像这样的HTML。为了清晰起见，我添加了一些类，但它们的名字无关紧要。在移动设备上我想要＆＃34; sub-nav＆＃34;成为＆＃34;移动父母的孩子＆＃34;李。我已经让它出现在li之后但不在DOM结构中。我错过了什么？我一直在搞乱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。

＆＃13;

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

＆＃13;

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

＆＃13;

<强>更新如果您想要JS解决方案，请尝试以下操作。但是，我不认为JS是最好的解决方案，因为你可以通过CSS实现它。

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

将列表移动到其他列表中

1 个答案: