Html 手风琴菜单（纯CSS），带<；a href="#&引用&燃气轮机；在<；标签></标签>；

我只是用CSS设置了一个漂亮的手风琴菜单，使用单选按钮确保一次打开的子菜单不超过一个子菜单

问题是，我想将一些具有子菜单的单选按钮与一些不具有子菜单的单选按钮组合在一起：因此，当选中时，具有子菜单的单选按钮将扩展为链接列表，而其他按钮只是重定向到另一个索引页的链接

我想将两者合并到同一个列表中，这样当选中链接/单选按钮时，所有其他子菜单都会崩溃，但似乎一旦单选按钮变为链接，它就停止作为收音机工作（因此链接仍然工作，但其他收音机也保持选中状态）。我怎样才能解决这个问题

我不是专业人士，也没有接受过任何培训，所以我希望我在代码中犯了一些错误，任何更正都非常感谢

提前感谢,

代码如下：

CSS:

html:

电影






视频




剧照






拼贴画

.accordion label {


    position: relative;
    display: block;
    cursor: pointer;

    line-height: 33px;

    background: transparent;

}
.accordion label:hover {
    background: rgba(243, 243, 243, 0.09);
}
.accordion input + label {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.accordion input:checked + label,
.accordion input:checked + label:hover {
    background: rgba(205, 236, 197, 0);

}
.accordion input {
    display: none;
}
.accordion .article {
    background: transparent;
    overflow: hidden;
    width: 140px;
    height: 0px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    margin-left: 10px;
    line-height: 33px;
}

.accordion .article p {
    font-style: italic;
    padding: 20px;
}

.accordion input:checked ~ .article {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.accordion input:checked ~ .article.ac-small {
    height: auto;
}
.accordion input:checked ~ .article.ac-medium {
    height: auto;
}
.accordion input:checked ~ .article.ac-large {
    height: auto;
}
.accordion input {
    display: none;
}

<div class="container">
<div class="accordion">
<div>

            <input id="ac-1" name="accordion-1" type="radio" />
            <label for="ac-1"><a href="Home" rel="history">Title Here</a></label>

</div>
<div>
            <input id="ac-2" name="accordion-1" type="radio" />
            <label for="ac-2">film</label>
<div class="article ac-small">
<a href="spleen" rel="history">spleen, 2014</a>
<br>
<a href="girl-before-a-mirror" rel="history">girl before a mirror, 2015</a>
<br>
<a href="coming-soon" rel="history">playground (soon)</a>
<br>
<a href="coming-soon" rel="history">hand job (soon)</a>
</div>
</div>
<div>
            <input id="ac-3" name="accordion-1" type="radio" />
            <label for="ac-3">video</label>
<div class="article ac-medium">
<a href="this-is-britain" rel="history">this is britain, 2014</a>
<br>
<a href="mind-glitch" rel="history">mind glitch, 2014</a>
<br>
<a href="coming-soon" rel="history">film in a bottle, 2015 (soon)</a>
</div>
</div>
<div>
            <input id="ac-4" name="accordion-1" type="radio" />
            <label for="ac-4">stills</label>
<div class="article ac-large">
<a href="carpool" rel="history">carpool, 2014</a>
<br>
<a href="berlin-streets" rel="history">berlin streets, 2013</a>
<br>
<a href="serpentine" rel="history">serpentine, 2013</a>
<br>
<a href="the-three-ages" rel="history">the three ages, 2013</a>
</div>
</div>
<div>
            <input id="ac-5" name="accordion-1" type="radio" />
            <label for="ac-5">collage</label>
<div class="article ac-large">
<a href="spartacus" rel="history">spartacus, 2014</a>
<br>
<a href="white-ambition" rel="history">white ambition, 2014</a>
</div>
</div>
<div>
            <input id="ac-6" name="accordion-1" type="radio" />
            <label for="ac-6"><a href="who" rel="history">About</a></label>


</div>
</div>
</div>
</div>
</div>