如何根据下拉菜单选择显示不同的内容？

Question

在下面的代码段中，我使用了一个简单的下拉自定义下拉菜单（不是选择菜单），并且我试图根据选择的菜单项显示动态内容。 我不确定从哪里开始。

如何根据下拉选择显示不同的内容？

 let dropdown = document.querySelector('.dropdown-select'); dropdown.addEventListener('click', (e) => { if (dropdown.classList.contains('closed')) { dropdown.classList.remove('closed'); } else { dropdown.classList.add('closed'); } });

 .active { color: purple; } .dropdown-select { transition: all 0.2s ease; overflow: hidden; cursor: pointer; border-top: 1px solid #E0E5EC; } .dropdown-select__title { display: flex; align-items: center; padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #E0E5EC; } .dropdown-select__title h6 { font-size: 0.75rem; line-height: 0.75rem; letter-spacing: 1px; text-transform: uppercase; } .dropdown-select__title img { width: 1.5rem; height: 1.5rem; margin-left: auto; transition: all 0.2s ease; } .dropdown-select ul { margin: 0; padding: 0; list-style-type: none; } .dropdown-select .menu { transition: all 0.2s ease; } .dropdown-select .menu li { font-size: 1rem; line-height: 1.5rem; padding: 1rem 0; font-weight: 800; color: #005fec; } .dropdown-select__title, .dropdown-select .menu { padding-left: 1.5rem; padding-right: 1.5rem; } .dropdown-select.closed .menu { height: 0; } .dropdown-select.closed img { transform: rotate(180deg); } .tabbed-content { padding: 0 1.5rem; margin-top: 2rem; }

 <main> <div class="dropdown-select closed"> <div class="dropdown-select__title"> <h6>Other Releases</h6> <img src="https://cdn-icons-png.flaticon.com/24/25/25243.png" alt="down caret "> </div> <ul class="menu"> <li>Fall 2021</li> <li>Summer 2021</li> </ul> </div> <div class="tabbed-content"> <div id="1">Fall 2021</div> <div id="2">Summer 2021</div> </div> </main>

Answer 1

您可以使用数据属性来存储用户单击时要显示的内容。

为此， click向每个选项添加一个click事件侦听器，该侦听器将遍历每个可能的内容选项并显示其id与数据属性值匹配的选项，同时隐藏所有其他选项。

 let dropdown = document.querySelector('.dropdown-select'); dropdown.addEventListener('click', (e) => { if (dropdown.classList.contains('closed')) { dropdown.classList.remove('closed'); } else { dropdown.classList.add('closed'); } }); const options = document.querySelectorAll('.menu li') const results = document.querySelectorAll('.tabbed-content div') options.forEach(e => e.addEventListener('click', function(){ results.forEach(f => f.style.display = f.id == e.dataset.target ? "block" : "none") }))

 .active { color: purple; } .dropdown-select { transition: all 0.2s ease; overflow: hidden; cursor: pointer; border-top: 1px solid #E0E5EC; } .dropdown-select__title { display: flex; align-items: center; padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #E0E5EC; } .dropdown-select__title h6 { font-size: 0.75rem; line-height: 0.75rem; letter-spacing: 1px; text-transform: uppercase; } .dropdown-select__title img { width: 1.5rem; height: 1.5rem; margin-left: auto; transition: all 0.2s ease; } .dropdown-select ul { margin: 0; padding: 0; list-style-type: none; } .dropdown-select .menu { transition: all 0.2s ease; } .dropdown-select .menu li { font-size: 1rem; line-height: 1.5rem; padding: 1rem 0; font-weight: 800; color: #005fec; } .dropdown-select__title, .dropdown-select .menu { padding-left: 1.5rem; padding-right: 1.5rem; } .dropdown-select.closed .menu { height: 0; } .dropdown-select.closed img { transform: rotate(180deg); } .tabbed-content { padding: 0 1.5rem; margin-top: 2rem; } .tabbed-content div{ display:none; }

 <main> <div class="dropdown-select closed"> <div class="dropdown-select__title"> <h6>Other Releases</h6> <img src="https://cdn-icons-png.flaticon.com/24/25/25243.png" alt="down caret "> </div> <ul class="menu"> <li data-target="1">Fall 2021</li> <li data-target="2">Summer 2021</li> </ul> </div> <div class="tabbed-content"> <div id="1" style="display:block">Fall 2021</div> <div id="2">Summer 2021</div> </div> </main>