Append<li> 在一个 div 里面</li>

Question

我用一个 div 创建了这个导航，里面有那些 li

<nav>
    <div class="nav-links">
                <li><a href="./index.html">Αρχική</a></li>
                <li><a href="./products.html">Προϊόντα</a></li>
                <li><a href="./photos.html">Φωτογραφίες</a></li>
    </div>
</nav>

另外，我创建了一个“汉堡” div，当有人在打电话时，它用作按钮，当你点击它时，它会显示 Αρχική,Προϊόντα,Φωτογραφίες。

<div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
</div>

但是，每当有人在打电话并点击它时，我都想再多一个名为“谷歌地图”的里。 无论如何我可以使用 Javascript 做到这一点吗？

Answer 1

实现这一点的最简单方法是通过 CSS - 具有仅在手机屏幕尺寸上显示 Google 地图链接的媒体查询。 对于任何 768 像素及以上的屏幕尺寸，以下媒体查询将使用 maps-link class 隐藏 li。

您可以通过查看下面的片段在此处看到这一点（相当于小屏幕，您将在其中看到地图链接，因为宽度不足以匹配媒体查询......然后单击“全屏”链接切换到全屏，现在地图链接将不会显示 - 因为宽度足以触发媒体查询。

另请注意，li 是 ul 元素的子元素 - 而不是 div。

而不是创建两个单独的导航列表 - 一个用于电话，一个用于非电话......最好有一个列表并为不同的视口设置相应的样式。

 @media only screen and (min-width: 768px) {.maps-link { display: none; } }

 <nav> <ul class="nav-links"> <li><a href="./index.html">Αρχική</a></li> <li><a href="./products.html">Προϊόντα</a></li> <li><a href="./photos.html">Φωτογραφίες</a></li> <li class="maps-link"><a href="./maps.html">Google maps</a></li> </ul> </nav>