javascript - 如何仅使用 Vanilla Javascript 在不知道其位置的情况下定位子节点

Question

我创建了一个模型导航栏，并使用 mouseenter 事件，能够在其父 li 元素内显示子菜单。

这是使用 children 属性并定位子菜单的位置来实现的，但想知道如何在不知道的情况下实现这一点，或者是否有更好的惯用方法。

子菜单和列表项具有相同的类名。

下面，您将找到我的代码:

'use strict';

var dropdown = document.getElementsByClassName('dropdown');

document.addEventListener('DOMContentLoaded', function(e) {

	e.preventDefault();

	Array.from(dropdown).forEach(function(node) {
		node.addEventListener('mouseenter', function(event) {
			event.target.children[1].style.display = 'block';
		});
	});

	Array.from(dropdown).forEach(function(node) {
		node.addEventListener('mouseleave', function(event) {
			event.target.children[1].style.display = 'none';
		});
	});

});

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

header {
	height: 20vh;
	width: 100vw;
	background-color: #000;
}

.navbar {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

.navbar > li {
	display: inline-block;
	list-style-type: none;
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
}

.navbar li a {
	text-align: center;
	padding-left: 30px;
	white-space: nowrap;
}

.menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	padding: 0;
}

.menu > li {
	list-style-type: none;
	padding: 10px 0;
	float: none;
}

li {
	width: 100px;
}

a {
	font-family: Helvetica Neue;
	text-decoration: none;
	color: #fff;
	display: block;
}

<header>
	<nav>
		<ul class="navbar">
			<li class="dropdown"><a href="#">I drop down</a>
				<ul class="menu">
					<li><a href="#">1</a></li>
					<li><a href="https://google.co.uk">2</a></li>
				</ul>
			</li>
			<li class="dropdown"><a href="#">So do I</a>
				<ul class="menu">
					<li><a href="#">3</a></li>
					<li><a href="https://stackoverflow.com">4</a></li>
				</ul>
			</li>
			<li><a href="#">No effect</a></li>
			<li><a href="#">Same here</a></li>
		</ul>
	</nav>
</header>

Answer 1

一种选择是向目标元素添加id(或class)，然后向控制元素添加一些属性以表示它控制哪个目标元素。如果不了解两个节点之间的 DOM 关系，您就必须添加一些信息来连接它们。

我本来打算使用 data- 属性，但后来我想起通过使用 aria-controls 你也可以添加一些 a11y。

'use strict';

var dropdown = document.getElementsByClassName('dropdown');

document.addEventListener('DOMContentLoaded', function(e) {

    e.preventDefault();

    Array.from(dropdown).forEach(function(node) {
        node.addEventListener('mouseenter', function(event) {
            var menuId = event.srcElement.getAttribute('aria-controls');
            document.getElementById(menuId).style.display = 'block';
        });
        node.addEventListener('mouseleave', function(event) {
            var menuId = event.srcElement.getAttribute('aria-controls');
            document.getElementById(menuId).style.display = 'none';
        });
    });

});

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

header {
    height: 20vh;
    width: 100vw;
    background-color: #000;
}

.navbar {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    float: left;
}

.navbar > li {
    display: inline-block;
    list-style-type: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}

.navbar li a {
    text-align: center;
    padding-left: 30px;
    white-space: nowrap;
}

.menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
}

.menu > li {
    list-style-type: none;
    padding: 10px 0;
    float: none;
}

li {
    width: 100px;
}

a {
    font-family: Helvetica Neue;
    text-decoration: none;
    color: #fff;
    display: block;
}

<header>
        <nav>
            <ul class="navbar">
                <li class="dropdown" aria-controls="menu1"><a href="#">I drop down</a>
                    <ul class="menu" id="menu1">
                        <li><a href="#">1</a></li>
                        <li><a href="https://google.co.uk">2</a></li>
                    </ul>
                </li>
                <li class="dropdown" aria-controls="menu2"><a href="#">So do I</a>
                    <ul class="menu" id="menu2">
                        <li><a href="#">3</a></li>
                        <li><a href="https://stackoverflow.com">4</a></li>
                    </ul>
                </li>
                <li><a href="#">No effect</a></li>
                <li><a href="#">Same here</a></li>
            </ul>
        </nav>
    </header>