【发布时间】：2021-12-08 15:18:51
【问题描述】：
在下面的 sn-p 中，我试图显示下拉菜单，其中当前显示的内容在列表项（活动类）下方有一个下划线。如果单击了另一个列表项，则将活动类移动到该单击的元素。我已经完成了大部分工作，但单击时似乎无法切换列表项。
如何在单击的菜单项之间切换活动类？
let dropdown = document.querySelector('.dropdown-select');
let dropdownItem = document.querySelectorAll('.dropdown-select .menu li');
dropdown.addEventListener('click', (e) => {
if (dropdown.classList.contains('closed')) {
dropdown.classList.remove('closed');
dropdown.classList.add('open');
} else {
dropdown.classList.add('closed');
dropdown.classList.remove('open');
}
});
for (let i = 0; i < dropdownItem.length; i++) {
dropdownItem[i].addEventListener('click', function() {
let dropdownItemClicked = document.querySelector('.menu li.active');
if (dropdownItemClicked) dropdownItemClicked.classList.remove('active');
this.parentNode.classList.add('active');
})
}
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")
})).dropdown-select {
transition: all 0.2s ease;
overflow: hidden;
cursor: pointer;
border-top: 1px solid #E0E5EC;
padding-bottom: 10px;
width: 100%;
}
@media (min-width: 768px) {
.dropdown-select {
display: flex;
align-items: center;
cursor: default;
}
}
.dropdown-select.open {
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
.dropdown-select.open {
box-shadow: unset;
}
}
.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;
pointer-events: none;
}
.dropdown-select__title img {
width: 1.312rem;
height: 0.656rem;
margin-left: auto;
transition: all 0.2s ease;
}
@media (min-width: 768px) {
.dropdown-select__title img {
display: none;
}
}
.dropdown-select ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.dropdown-select .menu li {
font-size: 1rem;
line-height: 1.5rem;
padding: 1rem 0;
font-weight: 800;
color: #6D7582;
}
@media (min-width: 768px) {
.dropdown-select .menu li {
padding: 0;
cursor: pointer;
}
.dropdown-select .menu li:first-child {
margin-right: 2rem;
}
}
.dropdown-select .menu li.active {
color: #005fec;
}
@media (min-width: 768px) {
.dropdown-select .menu li.active {
border-bottom: 4px solid #005fec;
}
}
.dropdown-select__title,
.dropdown-select .menu {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
@media (min-width: 768px) {
.dropdown-select__title,
.dropdown-select .menu {
display: flex;
align-items: center;
padding-left: 0;
padding-right: 0;
margin-right: 3.875rem;
}
}
.dropdown-select.closed .menu {
height: 0;
}
.dropdown-select.closed img {
transform: rotate(180deg);
}
.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" class="active">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>【问题讨论】：
-
我正在尝试了解您的问题，但我不能，抱歉！所以，从我在你的狙击手上看到的。您有一个下拉菜单（标题为“其他发布”），当您单击它时，它会打开包含 2 个项目（“2021 年秋季”和“2021 年夏季”）的菜单。当您单击其中任何一个时，下拉菜单会关闭并单击的项目显示在下拉列表下方。究竟是什么问题？
-
@JVLobo - 以全页模式查看。我只是想将活动类应用于单击的列表项。如果我单击 2021 年夏季，则将活动课程添加到其中。如果我返回单击 2021 年秋季，则将活动课程添加到其中。这有意义吗？
-
我想是的。我发布了一个答案，希望它有助于解决您的问题。
标签： javascript css