[英]Hide all elements within a class that don't match the ID of a variable
I have a site with tiles much like the Windows 10 Start menu.我有一个与 Windows 10 开始菜单非常相似的磁贴网站。
I need these tiles to have fullwidth drop downs once clicked, I'll need the dropdown to close if the same tile is clicked again and I need one dropdown to close others if a different tile is clicked.我需要这些磁贴在点击后具有全角下拉菜单,如果再次单击同一个磁贴,我需要关闭下拉列表,如果单击不同的磁贴,我需要一个下拉列表关闭其他磁贴。
These tiles will have all sorts of names so I was hoping to create some javascript that would be dictated by the ID of the tile clicked.这些磁贴将具有各种名称,因此我希望创建一些由单击的磁贴 ID 决定的 javascript。
Here's what I have so far:这是我到目前为止所拥有的:
<div id="gaming" class="box one-one blue" onclick="showSection(this);">
<div id="gaming-section" class="section">
<div id="marketing" class="box one-one blue" onclick="showSection(this);">
<div id="marketing-section" class="section">
function showSection(obj) {
var tileName =obj.getAttribute('id');
var sectionName =(tileName+'-section');
document.getElementById(sectionName).style.display = "block";
}
Any help would be much appreciated任何帮助将非常感激
exchange document.getElementById(sectionName).style.display = "block";
交换
document.getElementById(sectionName).style.display = "block";
for this:为了这:
const elemStyle = document.getElementById(sectionName);
if (elem.style.display !== 'block') {
elem.style.display = 'block';
else {
const elements = document.getElementsByClassName('section');
elements.forEach(elem => {
elem.style.display = 'none';
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.