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>