如何将类应用于下拉菜单中的单击元素?

Question

在下面的代码片段中，我试图显示下拉菜单，当前显示的内容在列表项(活动类)下面有下划线。如果单击了另一个列表项，则将活动类移动到已单击的元素。我已经得到了大部分的方法，但是当我点击列表项时，我似乎无法切换。

如何在单击的菜单项之间切换活动类?

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>

Answer 1

因此，为了解决问题，您应该针对执行了单击事件的特定元素。再加上active类。如代码片段所示。我只修改了这个事件侦听器来接收event，然后将active类添加到target

dropdownItem[i].addEventListener('click', function(event) {
let dropdownItemClicked = document.querySelector('.menu li.active');
if (dropdownItemClicked) dropdownItemClicked.classList.remove('active');
event.target.classList.add('active');
})

我相信这解决了你的问题。

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(event) {
let dropdownItemClicked = document.querySelector('.menu li.active');
if (dropdownItemClicked) dropdownItemClicked.classList.remove('active');
event.target.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>

Answer 2

你已经很接近你想要的效果了。

如果我们看一下下面的行，我们可以看到我们正在尝试调整类。因此，我们成功地删除了活动类，但无法在需要的地方添加它。这是由于类试图添加到错误的元素，父元素而不是兄弟元素。

if (dropdownItemClicked) dropdownItemClicked.classList.remove('active');
this.parentNode.classList.add('active');

通过改变一行，我们可以将类添加到正确的元素中，如下所示。

if (dropdownItemClicked) dropdownItemClicked.classList.remove('active');
dropdownItem[i].classList.add('active');

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');
dropdownItem[i].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>