加 <ul> 內部存在 <li>
[英]Add <ul> inside existing <li>
問題描述
<!DOCTYPE html> <html> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a> <ul> <li>profile</li> <li>details</li> </ul></li> </ul> </body> </html>
我的菜單頭中有這個簡單的li 。我只是想添加子列表，就像我單擊about子列表時應該顯示的那樣。 我該怎么做？
2 個解決方案
解決方案1
2 2018-07-28 14:34:53
您可以通過更改其display屬性來使它最初處於隱藏狀態，並在單擊“ About時顯示它（ display: none使它隱藏，而display: block顯示它）。
<!DOCTYPE html> <html> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about" onClick="showAbout()">About</a> <ul style="display: none;" id="about"> <li>profile</li> <li>details</li> </ul> </li> </ul> <script> function showAbout() { document.getElementById("about").style.display = "block"; } </script> </body> </html>
如果你想切換About子菜單中的知名度，可以檢查display的財產About每次子菜單About被點擊。
<!DOCTYPE html> <html> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about" onClick="showAbout()">About</a> <ul style="display: none;" id="about"> <li>profile</li> <li>details</li> </ul> </li> </ul> <script> function showAbout() { var about = document.getElementById("about"); if (about.style.display === "none") { about.style.display = "block"; } else { about.style.display = "none"; } } </script> </body> </html>
解決方案2
1 已采納 2018-07-28 14:46:04
您可以根據情況add remove class 。
$("a").on("click",function(e){ if($(e.target).attr('href') == '#about'){ $("#add").addClass('show'); $("#add").removeClass('hide'); } })
.hide{ display: none; } .show{ display:block; } #add{ position:absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a> <ul id="add" class="hide" > <li>profile</li> <li>details</li> </ul></li> </ul> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
編輯正如你希望出現ul是在點擊后的文本的頂部。
我使用JQuery添加新 <li> 現有項目 <ul> 但是新的 <li> 偏離其他 <li>
[英]I use JQuery to add new <li> item to the existing <ul> but the new <li> deviates from other <li>
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.