我试图在没有javascript的情况下在静态网站中组合2个技巧，如果可能的话。
首先，我在菜单上使用纯css手风琴。它使用无线电输入来控制子菜单的高度。因此，您单击标签，相关子菜单会展开，而其他子菜单会缩小。
其次，我使用锚标签隐藏或显示特定内容。这个answer总结了它。
底线：我有一个嵌套在标签标签中的锚标签，如下所示：
<div class="tab">
<input id="about-input" type="radio" name="menu">
<!-- Important part
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<label for="about-input">
<h5 class="nav-item">
<a href="#about">ABOUT US</a>
</h5>
</label>
<!--–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="tab-content">
<h6 class="nav-sub-item"><a href="#">1</a></h6>
<h6 class="nav-sub-item"><a href="#">2</a></h6>
<h6 class="nav-sub-item"><a href="#">3</a></h6>
<h6 class="nav-sub-item"><a href="#">4</a></h6>
<h6 class="nav-sub-item"><a href="#">5</a></h6>
</div>
</div>
如another answer中所述：
在HTML5 CR中，a元素是出于这样的原因而定义的，因此不允许使用交互式后代，并且标签计为交互式。
所以我将锚标记保持在最深的位置。但是，如果我单击锚点（嵌套在标签中），标签的for属性不会触发，如果我单击标签的其余部分，我就会在锚点（和锚点）之外标签未更新）
编辑：根据要求，我用css写了一个片段。在这个版本中，链接接管前2个菜单项。我删除了第3和第4个菜单项中的链接，这样你就可以看到菜单使用:checked伪选择器扩展/缩小，但当然部分锚定不会出现（没有链接）。
#why,
#about,
#why2,
#about2{
opacity: 0;
display: none;
}
#why:target,#about:target,#why2:target,#about2:target {
display: block;
opacity: 1;
}
.tab input:checked ~ .tab-content {
max-height: 25em;
}
.tab-content {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .35s;
-o-transition: max-height .35s;
transition: max-height .35s;
}
.tab input,
#menu-input {
position: absolute;
opacity: 0;
z-index: -1;
}
.menu {
position: absolute;
width: 30%;
background-color: grey;
top: 0;
left: 0;
bottom: 0;
}
.content {
position: absolute;
left: 30%;
background-color: cyan;
top: 0;
right: 0;
bottom: 0;
}
.tab input {
position: absolute;
opacity: 0;
z-index: -1;
}<html>
<body>
<div class="menu">
<div class="tab expandable">
<input id="about-input" type="checkbox">
<label id="about-label" for="about-input">
<a href="#about">
<h5 class="nav-item">ABOUT US</h5>
</a>
</label>
<div class="tab-content">
<h6 class="nav-sub-item"><a href="about/purpose">Purpose</a></h6>
<h6 class="nav-sub-item"><a href="about/1">1</a></h6>
<h6 class="nav-sub-item"><a href="about/2">2</a></h6>
<h6 class="nav-sub-item"><a href="about/3">3</a></h6>
<h6 class="nav-sub-item"><a href="anout/4">4</a></h6>
</div>
</div>
<div class="tab expandable">
<input id="why-input" type="checkbox">
<label id="why-label" for="why-input">
<a href="#why">
<h5 class="nav-item">WHY</h5>
</a>
</label>
<div class="tab-content">
<h6 class="nav-sub-item"><a href="why/purpose">why is that?</a></h6>
<h6 class="nav-sub-item"><a href="why/1">1</a></h6>
<h6 class="nav-sub-item"><a href="why/2">2)</a></h6>
<h6 class="nav-sub-item"><a href="why/3">3</a></h6>
<h6 class="nav-sub-item"><a href="why/4">4</a></h6>
</div>
</div>
<div class="tab expandable">
<input id="about2-input" type="checkbox">
<label id="about2-label" for="about2-input">
<h5 class="nav-item">ABOUT US2</h5>
</label>
<div class="tab-content">
<h6 class="nav-sub-item"><a href="about/purpose">Purpose2</a></h6>
<h6 class="nav-sub-item"><a href="about/1">1</a></h6>
<h6 class="nav-sub-item"><a href="about/2">2</a></h6>
<h6 class="nav-sub-item"><a href="about/3">3</a></h6>
<h6 class="nav-sub-item"><a href="anout/4">4</a></h6>
</div>
</div>
<div class="tab expandable">
<input id="why2-input" type="checkbox">
<label id="why2-label" for="why2-input">
<h5 class="nav-item">WHY2</h5>
</label>
<div class="tab-content">
<h6 class="nav-sub-item"><a href="why2/purpose">why2 is that?</a></h6>
<h6 class="nav-sub-item"><a href="why2/1">1</a></h6>
<h6 class="nav-sub-item"><a href="why2/2">2)</a></h6>
<h6 class="nav-sub-item"><a href="why2/3">3</a></h6>
<h6 class="nav-sub-item"><a href="why2/4">4</a></h6>
</div>
</div>
</div>
<div class="content">
<section id="about">
Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur
et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia. Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra
</section>
<section id="why">
modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam
vini: huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros. At nunc si ad aliquem bene nummatum tumentemque ideo honestus advena salutatum introieris, primitus tamquam exoptatus suscipieris et interrogatus multa coactusque mentiri,
miraberis numquam antea visus summatem virum tenuem te sic enixius observantem, ut paeniteat ob haec bona tamquam praecipua non vidisse ante decennium Romam.
</section>
<section id="about2">
Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur
et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia. Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra
</section>
<section id="why2">
modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam
vini: huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros. At nunc si ad aliquem bene nummatum tumentemque ideo honestus advena salutatum introieris, primitus tamquam exoptatus suscipieris et interrogatus multa coactusque mentiri,
miraberis numquam antea visus summatem virum tenuem te sic enixius observantem, ut paeniteat ob haec bona tamquam praecipua non vidisse ante decennium Romam.
</section>
</div>
</body>
有没有办法正确传播事件？或者解决方法？
答案 0 :(得分：2)
所以我将锚标记保持在最深的位置。但是，如果我点击锚点（嵌套在标签中），标签的
for属性不会触发，如果我点击标签的其余部分，我就是在锚之外（锚标记未更新）有没有办法正确传播事件？或者解决方法？
<强>布局
<label>到＃{1}}＃3。for nchor定位于位于<button>之外的隐藏<a>。<section>与＃1的<label>相关联。<button> 活动顺序
点击<label>边缘（粉色方黄色虚线边框）。
在<h5>下注明<label>的内容（<label>出现）。
这证明可以利用<section>与表单元素#content:target之间的链接
现在重复处理，但从点击<label for>开始，您应该会得到相同的结果。
<强>捕获 ............................的鼓泡
...........................................
<强>阶段 .................................的相位< /强>
... <button> ...
<a> {.............................. {1}}
....▼.......................................... ▲
...事件触发.................
.. event.currentTarget {................................... {1}}
...▼......................................▲
......事件触发.......
<label> {................. {1}}
...▼..........................▲
.. <label> .................... <a>
.......................
........ <a>
........ 活动目标
<button>已点击＃1链接到<button>＃3 <h5>＃2被传递到<h5>＃3 event.target＃2并显示目标<label>。
<button><a><button>