Question

我的网站很像Windows 10“开始”菜单。

我需要这些瓷砖在点击后有全宽下拉，如果再次点击相同的瓷砖，我需要关闭下拉菜单，如果点击不同的瓷砖，我需要一个下拉菜单关闭其他瓷砖。

这些图块会有各种各样的名称，所以我希望创建一些javascript，这些javascript将由点击的图块的ID决定。

这是我到目前为止所拥有的：

<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";
}

非常感谢任何帮助

Answer 1

交换document.getElementById(sectionName).style.display = "block";：

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';
    }
}

隐藏类中与变量ID

1 个答案: