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

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事件侦听器，该侦听器将循环遍历每个可能的内容选项，并显示其id与data属性值匹配的选项，同时隐藏所有其他选项。

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>