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