javascript - 附加在一个 div 里面

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来做到这一点吗？

标签： javascripthtmlcss

Answer 1

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

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

另请注意，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>