[英]I need HELP in disabling dropdown styles for other questions when I click on just one of them
I brought the necessary dom elements in with querySelectorAll(), I have been able to enable and disable the styles I want for each individual FAQ question dropdown when I Click but I also want to be able to disable the dropdowns for any other open questions that might be open when I click on just one.我使用 querySelectorAll() 引入了必要的 dom 元素,当我单击时,我已经能够为每个单独的常见问题解答问题下拉列表启用和禁用我想要的样式,但我也希望能够禁用任何其他未解决问题的下拉列表当我只点击一个时可能会打开。
JS script JS脚本
const questionContainer = document.querySelectorAll('.question');
function triggerDropdown() {
questionContainer.forEach((q) => {
const summary = q.querySelector('.summary'),
img = q.querySelector('.img'),
dropdown = q.querySelector('.dropdown');
q.addEventListener('click', function () {
img.classList.toggle('flip');
summary.classList.toggle('bold');
summary.classList.contains('bold')
? (dropdown.style.display = 'inline-block')
: (dropdown.style.display = 'none');
});
});
}
CSS styles to be changed要更改的 CSS 样式
.dropdown {
display: none;
}
/* Activate with JS */
.bold {
font-weight: 700;
font-size: 13px;
}
.flip {
transform: scaleY(-1);
}
HTML HTML
<div class="content">
<h1>FAQ</h1>
<br />
<div class="question">
<p class="summary">QUESTION ASKED?<span class="arrow"><img class="img" src="images/icon-arrow-down.svg" alt="dropdown arrow"></span></p>
<p class="dropdown">
ANSWERS TO QUESTION
</p>
</div>
<div class="question">
<p class="summary">QUESTION ASKED?<span class="arrow"><img class="img" src="images/icon-arrow-down.svg" alt="dropdown arrow"></span></p>
<p class="dropdown">
ANSWERS TO QUESTION
</p>
</div>
<div class="question">
<p class="summary">QUESTION ASKED?<span class="arrow"><img class="img" src="images/icon-arrow-down.svg" alt="dropdown arrow"></span></p>
<p class="dropdown">
ANSWERS TO QUESTION
</p>
</div>
<div class="question">
<p class="summary">QUESTION ASKED?<span class="arrow"><img class="img" src="images/icon-arrow-down.svg" alt="dropdown arrow"></span></p>
<p class="dropdown">
ANSWERS TO QUESTION
</p>
</div>
<div class="question">
<p class="summary">QUESTION ASKED?<span class="arrow"><img class="img" src="images/icon-arrow-down.svg" alt="dropdown arrow"></span></h1>
<p class="dropdown">
ANSWERS TO QUESTION
</p>
</div>
</div>
Essentially you could iterate over all the dropdowns:基本上你可以遍历所有的下拉菜单:
const questionContainer = document.querySelectorAll('.question');
const dropdowns = document.querySelectorAll('.dropdown');
questionContainer.forEach((q) => {
const summary = q.querySelector('.summary'),
img = q.querySelector('.img');
q.addEventListener('click', function (event) {
img.classList.toggle('flip');
summary.classList.toggle('bold');
dropdowns.forEach (dropdown => {
if (dropdown !== q.querySelector('.dropdown')) {
// the dropdown that was clicked
summary.classList.contains('bold')
? (dropdown.style.display = 'inline-block')
: (dropdown.style.display = 'none');
}
else {
// one of the other non-clicked dropdowns
}
});
});
});
With Bryan Grace's suggestion and help, I was able to figure out a way to toggle the css properties for the dropdown and at the same time remove those same properties for the unclicked questions.在 Bryan Grace 的建议和帮助下,我找到了一种方法来切换下拉列表的 css 属性,同时删除未点击问题的相同属性。
Basically I iterated over the dropdowns, arrows, and summaries with a forEach to see if it matched with the clicked item, if it did not, the css properties were removed.基本上,我使用 forEach 遍历下拉菜单、箭头和摘要,以查看它是否与单击的项目匹配,如果不匹配,则删除 css 属性。
const questionContainer = document.querySelectorAll('.question');
const dropdowns = document.querySelectorAll('.dropdown');
const summaries = document.querySelectorAll('.summary');
const arrows = document.querySelectorAll('.img');
questionContainer.forEach((q) => {
// individual variables for each question container
const summary = q.querySelector('.summary'),
qArrow = q.querySelector('.img');
// Event Listener
q.addEventListener('click', function () {
qArrow.classList.toggle('flip');
summary.classList.toggle('bold');
dropdowns.forEach((dropdown) => {
// If dropdown clicked matches dropdown iterated over enable dropdown properties
if (dropdown === q.querySelector('.dropdown')) {
summary.classList.contains('bold')
? (dropdown.style.display = 'inline-block')
: (dropdown.style.display = 'none');
// If not a match, remove dropdown properties
} else if (dropdown !== q.querySelector('.dropdown')) {
dropdown.style.display = 'none';
summaries.forEach((s) => {
if (s !== summary) {
s.classList.remove('bold');
}
});
arrows.forEach((arrow) => {
if (arrow !== qArrow) {
arrow.classList.remove('flip');
}
});
}
});
});
});
Although I feel like the code for this operation should be a lot less.虽然我觉得这个操作的代码应该少很多。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.