javascript - addEventListener 与 getElementsByClassName

Question

我正在尝试在 javascript(vanilla)中创建一个下拉菜单。我知道如何在 CSS 中执行此操作，但如果我不尝试在 Javascript 中执行操作，我将永远无法真正理解 Javascript，因此出现了这个问题。

我的问题是我不知道如何使用 getElementsByClassName 中的数组并将其循环以仅针对 <li>那被点击了。我用谷歌搜索直到头疼，这是由于缺乏对如何获取/使用带有 onclick 的数组的理解/知识。带有循环的事件。如果有人能帮我解决这个问题

function startUp() {
    subMenu();
}

function subMenu() {
    var menu = document.getElementById('Menu').addEventListener('click', subMenu);
    var drop = document.getElementsByClassName('sub');
        for (i = 0; i < drop.length; i++){
            drop += drop.length;
            if (drop.style.display === 'none') {
                drop.style.display = 'inline-block';
            }else {
                drop.style.display = 'none';
            }
        }
}
window.onload = startUp;

<nav id="Menu">
    <ul>
        <li>Home</li>
        <li>Members</li>
        <li>Gallery
            <ul class="sub" style="display: none;">
                <li>link</li>
                <li>link 1</li>
                <li>link 2</li>
                <li>link 3</li>
            </ul>
        </li>
        <li>Contact
            <ul class="sub" style="display: none;">
                <li>E-Mail</li>     
            </ul>
        </li>
        <li>Steam Community</li>
        <li>Youtube</li>
    </ul>
</nav>

整个下午我都尝试了多种不同的代码变体，如果不为 ID 编写多个函数而不是使用类，我似乎无法让它们一起工作。

Answer 1

drop 是一个 nodeList，表示具有 sub 类的元素。

drop 中的每个元素都可以使用其索引 进行访问。 => drop[i]

for (i = 0; i < drop.length; i++){
        //process drop[i]
}

我建议你使用以下方法:

您需要为每个具有 sub 类的 li 附加一个 click 事件。问题是当 subMenu 函数被调用时，它创建了一个单独的 context。如果您不使用 let 键，您会收到错误消息，因为当您单击 li 项时，i 的最后一个值在在这种情况下，for 循环将为 2。这是一个常见的问题。请看这里:closures inside loops .针对这类问题，ECMS6提供了let关键字。

function startUp() {
    subMenu();
}

function subMenu() {
    var drop = document.getElementsByClassName('sub');
    for(let i=0;i<drop.length;i++){
        drop[i].addEventListener('click', function(){
          if(drop[i].querySelector('ul').style.display==='none'){
            drop[i].querySelector('ul').style.display='block';
          }
          else
            drop[i].querySelector('ul').style.display='none';
        });
    };
}
window.onload = startUp;

<nav id="Menu">
    <ul>
        <li>Home</li>
        <li>Members</li>
        <li class="sub">Gallery
            <ul style="display: none;">
                <li>link</li>
                <li>link 1</li>
                <li>link 2</li>
                <li>link 3</li>
            </ul>
        </li>
        <li class="sub">Contact
            <ul style="display: none;">
                <li>E-Mail</li>     
            </ul>
        </li>
        <li>Steam Community</li>
        <li>Youtube</li>
    </ul>
</nav>

如果你不想使用 let 关键字，你应该使用 Immediately-invoked function expression .

如果您想要选择 链接而不关闭整个菜单，您必须使用event.target 属性，它指示发起事件的DOM 元素。因此，仅当您单击具有 sub 类的 li 而不是 ul childrens 时，您才应用 toggle 事件。

function startUp() {
    subMenu();
}

function subMenu() {
   var drop = document.getElementsByClassName('sub');
   for(var i=0;i<drop.length;i++){
     (function(index){
         drop[index].addEventListener('click', function(e){
            if(e.target.className=="sub"){
                if(drop[index].querySelector('ul').style.display==='none'){
                   drop[index].querySelector('ul').style.display='block';
                }
                else
                   drop[index].querySelector('ul').style.display='none';
            }
         });
     })(i);   
    };
}
window.onload = startUp;

<nav id="Menu">
    <ul>
        <li>Home</li>
        <li>Members</li>
        <li class="sub">Gallery
            <ul style="display: none;">
                <li>link</li>
                <li>link 1</li>
                <li>link 2</li>
                <li>link 3</li>
            </ul>
        </li>
        <li class="sub">Contact
            <ul style="display: none;">
                <li>E-Mail</li>     
            </ul>
        </li>
        <li>Steam Community</li>
        <li>Youtube</li>
    </ul>
</nav>