84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
我在嘗試找到一種方法在我的滑動選單的一個部分中新增子選單或下拉選單時遇到了一些困難。 此外，我不確定如何調整選單下拉時，其他部分（文字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>