如何在 html 中使用 href 隐藏和显示元素

Question

我有一个无序列表的项目，它需要像树结构一样一一显示。

通过单击第 3 部分，我想显示产品和安全性（主列表）。 单击产品后，想要显示产品 1、2、3、4.. 同样适用于安全列表。

由于我无法使用 javascript，因此我试图通过 css 获得它，但它不起作用。

有人可以帮我吗？

 #Sec3 { display: none; } #Sec3:target { display: block; } #SubSec1:target { display: block; } #SubSec2:target { display: block; }

 <ol> <li><a href="#Sec1"><span style="font-family: helvetica; font-size: 12pt;">Sample Event Flow</span></a></li> <li><a href="#Sec2"><span style="font-family: helvetica; font-size: 12pt;">Pre-requisite</span></a></li> <li><a href="#Sec3"><span style="font-family: helvetica; font-size: 12pt;">Sample Offerings &amp; On-boarding Process for Proof of Concept or Project</span></a></li> <ul id="Sec3"> <li><a href="#SubSec1"><span style="font-family: helvetica; font-size: 12pt;">Offerings</span></a></li> <ul id="SubSec1"> <li><span style="font-family: helvetica; font-size: 12pt;">Offering 1 - Publish Events Real Time</span></li> <li><span style="font-family: helvetica; font-size: 12pt;">Offering 2 - Subscribe Events Real Time</span></li> <li><span style="font-family: helvetica; font-size: 12pt;">Offering 3 - Publish and Enrich Events in Real Time</span></li> <li><span style="font-family: helvetica; font-size: 12pt;">Offering 4 - Event Monitoring and Production Support</span></li> </ul> <li><a href="#SubSec2"><span style="font-family: helvetica; font-size: 12pt;">Security</span></a></li> <ul> <li id="SubSec2"><span style="font-family: helvetica; font-size: 12pt;">Sample App Secure Integration Options / Process</span></li> </ul> </ul> <li><a href="#Sec4"><span style="font-family: helvetica; font-size: 12pt;">Sample Catalogue - MetaLine</span></a></li> <li><a href="#Sec5"><span style="font-family: helvetica; font-size: 12pt;">Sample Team</span></a></li> <li><span style="font-family: helvetica; font-size: 12pt;"><a href="#Sec6">FAQ</a></span></li> </ol>

Answer 1

 #SubSec1, #SubSec2 { display: none; z-index: -2; position: relative } button { position: relative; display: block; z-index: 1; outline: none; border: none; font-family: helvetica; font-size: 12pt; background: transparent; text-decoration: underline; height:19px; text-align:left; float: none; margin: none; left: -7px; cursor: pointer } button > li:first-of-type { display:list-item; padding: none; margin: none; left: -2px } ul#Sec3 li > a { position: relative; z-index: -1; height: 1px; color:blue } button#SubSec1_btn + #SubSec1:active, button#SubSec1_btn:focus + #SubSec1, button#SubSec2_btn + #SubSec2:active, button#SubSec2_btn:focus + #SubSec2 { display: block; } button#SubSec1_btn:focus, button#SubSec1_btn:focus > *, button#SubSec2_btn:focus, button#SubSec2_btn:focus > * { z-index: -2; cursor: pointer } #SubSec1:active, #SubSec2:active { z-index: 4 cursor: pointer }

 <ol> <li> <a href="#Sec1"><span style="font-family: helvetica; font-size: 12pt;">Sample Event Flow</span></a> </li> <li> <a href="#Sec2"><span style="font-family: helvetica; font-size: 12pt;">Pre-requisite</span></a> </li> <li> <a href="#Sec3"><span style="font-family: helvetica; font-size: 12pt;">Sample Offerings &amp; On-boarding Process for Proof of Concept or Project</span></a> </li> <ul id="Sec3"> <button id="SubSec1_btn"> <li> <a href="#SubSec1"><span style="font-family: helvetica; font-size: 12pt;">Offerings</span></a> </li> </button> <ul id="SubSec1"> <li><span style="font-family: helvetica; font-size: 12pt;">Offering 1 - Publish Events Real Time</span></li> <li><span style="font-family: helvetica; font-size: 12pt;">Offering 2 - Subscribe Events Real Time</span></li> <li><span style="font-family: helvetica; font-size: 12pt;">Offering 3 - Publish and Enrich Events in Real Time</span></li> <li><span style="font-family: helvetica; font-size: 12pt;">Offering 4 - Event Monitoring and Production Support</span></li> </ul> <button id="SubSec2_btn"> <li> <a href="#SubSec2"><span style="font-family: helvetica; font-size: 12pt;">Security</span></a> </li> </button> <ul id="SubSec2"> <li><span style="font-family: helvetica; font-size: 12pt;">Sample App Secure Integration Options / Process</span></li> </ul> </ul> <li> <a href="#Sec4"><span style="font-family: helvetica; font-size: 12pt;">Sample Catalogue - MetaLine</span></a> </li> <li> <a href="#Sec5"><span style="font-family: helvetica; font-size: 12pt;">Sample Team</span></a> </li> <li> <span style="font-family: helvetica; font-size: 12pt;"><a href="#Sec6">FAQ</a></span> </li> </ol>

Answer 2

我能够弄清楚这一点。

 #Sec3 { display: none; } #Sec3:target { display: block; } label { cursor: pointer; text-decoration: underline; }.sub-menu { display: block; max-height: 0; transition: max-height 0.3s; overflow: hidden; will-change: max-height; } input:checked ~.sub-menu { max-height: 100px; }

 <ol> <li><a href="#Sec1"><span style="font-family: helvetica; font-size: 12pt;">Sample Event Flow</span></a></li> <li><a href="#Sec2"><span style="font-family: helvetica; font-size: 12pt;">Pre-requisite</span></a></li> <li><a href="#Sec3"><span style="font-family: helvetica; font-size: 12pt;">Sample Offerings &amp; On-boarding Process for Proof of Concept or Project</span></a></li> <ul id="Sec3"> <li><label style="font-family: helvetica; font-size: 12pt;" for="parent1">Offerings</label> <input type="radio" id="parent1" hidden name="sub-menu-trigger"> <ul class="sub-menu"> <li><span style="font-family: helvetica; font-size: 12pt;">Offering 1 - Publish Events Real Time</span></li> <li><span style="font-family: helvetica; font-size: 12pt;">Offering 2 - Subscribe Events Real Time</span></li> <li><span style="font-family: helvetica; font-size: 12pt;">Offering 3 - Publish and Enrich Events in Real Time</span></li> <li><span style="font-family: helvetica; font-size: 12pt;">Offering 4 - Event Monitoring and Production Support</span></li> </ul> </li> <li><label for="parent2" style="font-family: helvetica; font-size: 12pt">Security</label> <input type="radio" id="parent2" hidden name="sub-menu-trigger"> <ul class="sub-menu"> <li><span style="font-family: helvetica; font-size: 12pt;">Sample App Secure Integration Options / Process</span></li> </ul> </li> </ul> <li><a href="#Sec4"><span style="font-family: helvetica; font-size: 12pt;">Sample Catalogue - MetaLine</span></a></li> <li><a href="#Sec5"><span style="font-family: helvetica; font-size: 12pt;">Sample Team</span></a></li> <li><span style="font-family: helvetica; font-size: 12pt;"><a href="#Sec6">FAQ</a></span></li> </ol>