我在尝试找到一种方法在我的滑动菜单的一个部分中添加子菜单或下拉菜单时遇到了一些困难。 此外，我不确定如何调整菜单下拉时，其他部分（文本2和文本3）自适应屏幕。
有人能帮我解决这个问题吗？ 非常感谢帮助！
我想在“文本1”中添加一个下拉菜单。
这个手风琴应该是工作的。 我尽量保持它尽可能简单，以免代码混乱。 您可以通过在标签的右侧添加一个图标使其更美观和用户友好...为此，我放置了我的codepen链接这里
input { display: none; } .tabs { overflow: hidden; } .tab { overflow: hidden; } .tab-label { display: flex; justify-content: space-between; padding: 1em; background: #2c3e50; font-weight: bold; cursor: pointer; color:white; } .tab-content { max-height: 0; padding: 0 1em; color: #2c3e50; background: white; transition: all 0.35s; border: 2px solid transparent; } input:checked~.tab-content { max-height: 100vh; padding: 1em; border: 2px solid black; } input:checked+.tab-label { background: darken(#2c3e50, 10%); }
<div class="submenu_accordion"> <div class="tabs"> <div class="tab"> <input type="checkbox" id="chck1"> <label class="tab-label" for="chck1">Item 1</label> <div class="tab-content"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis! </div> </div> </div> </div>
这个手风琴应该是工作的。 我尽量保持它尽可能简单，以免代码混乱。 您可以通过在标签的右侧添加一个图标使其更美观和用户友好...为此，我放置了我的codepen链接这里
input { display: none; } .tabs { overflow: hidden; } .tab { overflow: hidden; } .tab-label { display: flex; justify-content: space-between; padding: 1em; background: #2c3e50; font-weight: bold; cursor: pointer; color:white; } .tab-content { max-height: 0; padding: 0 1em; color: #2c3e50; background: white; transition: all 0.35s; border: 2px solid transparent; } input:checked~.tab-content { max-height: 100vh; padding: 1em; border: 2px solid black; } input:checked+.tab-label { background: darken(#2c3e50, 10%); }<div class="submenu_accordion"> <div class="tabs"> <div class="tab"> <input type="checkbox" id="chck1"> <label class="tab-label" for="chck1">Item 1</label> <div class="tab-content"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis! </div> </div> </div> </div>