在网站上,我有一个导航栏。当我单击a
导航栏中的时,我希望出现一个新的div
(包含内容),其他所有内容都“隐藏”。我做到了display: none
。在角落里应该有一个“ X”,它会关闭div并再次显示“第一个屏幕”。
我做了第一部分,但是在关闭时遇到了一些问题。这是我的代码:
const about = document.getElementById('li-about');
const work = document.getElementById('li-work');
const contact = document.getElementById('li-contact');
^这些是导航栏中的链接。
const openSlide = (id) => {
document.querySelector('main article#' + id).style.display = 'block';
document.querySelector('header').style.display = 'none';
};
about.addEventListener('click', () => openSlide('about'));
work.addEventListener('click', () => openSlide('work'));
contact.addEventListener('click', () => openSlide('contact'));
这是代码。有用。但是,当我想执行与关闭div函数类似的操作时,它仅适用于about
,而不适用work and contact
。
const closeSlide = (id) => {
document.querySelector('main article#' + id).style.display = 'none';
document.querySelector('header').style.display = 'block';
};
const close = document.querySelector('.close');
close.addEventListener('click', () => closeSlide('about'));
close.addEventListener('click', () => closeSlide('work'));
close.addEventListener('click', () => closeSlide('contact'));
你能告诉我为什么吗?控制台中没有错误,我尝试closeSlide
用一个简单的函数替换该函数,console.log
但它也不起作用。JavaScript是否可能仅检测到一个(HTML代码中的第一个).close
div?
JavaScript是否可能仅检测到一个(HTML代码中的第一个).close div?
是的,document.querySelector
返回它在DOM中找到的第一个匹配元素。如果要将侦听器添加到.close
页面上的每个侦听器,则可以循环访问由document.querySelectorAll
以下命令返回的NodeList :
const closeList = document.querySelectorAll('.close');
closeList.forEach(element => {
element.addEventListener('click', () => closeSlide('about'));
element.addEventListener('click', () => closeSlide('work'));
element.addEventListener('click', () => closeSlide('contact'));
};
或向包含您所有.close
元素的元素添加侦听器,这些元素仅.close
在单击a后才起作用:
document.querySelector('#some-container').addEventListener('click', evt => {
if (!evt.target.closest('.close')) return;
closeSlide('about');
closeSlide('work');
closeSlide('contact');
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句