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

debugcn 发表于 Dev

UI_Dev

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

通过单击第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>

UI_Dev

我能够弄清楚这一点。

#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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。