时间戳

首页 > 解决方案 > HTML/JavaScript 禁用元素

javascript - HTML/JavaScript 禁用元素

问题描述

我的网站上有一个下拉导航

<ul>
    <li><a href="index.html">Homepage</a></li>
    <li><a href="#">Forum</a></li>
                
    <div class="dropdown">
        <button onclick="mainDropdown()" class="mainDropdown">Videos</button>
        <ul class="dropdownList" id="dropdownList">

            <button id="intro">Introduction</button>
            <button id="start">Getting Started</button>

        </ul>
    </div>
                    
    <li class="test"><a href="index.html">Contact</a></li>
</ul>

我在我的 html 中有这个，可以忽略所有内容的 UL，因为这不是问题的一部分，前两个 LI 也不是

我遇到的问题是下拉部门。

function mainDropdown() {
    var dropdown = document.getElementById("dropdownList");
    dropdown.classList.toggle("active");
    if(dropdown.classList.contains("active")) {
        document.getElementById("intro").style.display = "block";
        document.getElementById("start").style.display = "block";
    } else if(!dropdown.classList.contains("active")) {
        setTimeout(() => {
            document.getElementById("intro").style.display = "none";
            document.getElementById("start").style.display = "none";
        }, 300);
    }
}

这是javascript方法（香草，试图在这个项目中不使用JQuery，就像提醒一样）。这很好用 - 但是，我正在寻找一种更好的方法来做到这一点。因为当我开始添加更多部分时，javascript 方法会变得相当冗长。

有没有一种方法可以用来获取 dropdownList UL 的子项，以便我可以遍历它们并设置它们的显示？而不是添加一堆相同的行。

标签： javascripthtml

解决方案

有没有一种方法可以用来获取 dropdownList UL 的子项，以便我可以遍历它们并设置它们的显示？

您可以通过 获取项目列表querySelectorAll('#dropdownList > *')。

或者您可以使用 css 选择器来切换显示：

#dropdownList {
  display: none;
}

#dropdownList.active {
  display: block;
}

或者，如果您出于某种原因需要执行个别项目：

#dropdownList > * {
  display: none;
}

#dropdownList.active > * {
  display: block;
}

推荐阅读