[13Foch]

<style>
		.menu__item {
			position: relative;
			display: inline-block;
			margin: 0 10px;
			cursor: pointer;
		}
		.menu__item.menu__item--active {
			background-color: silver;
		}
		.menu__menu-lvl2 {
			position: absolute;
			display: none;
			top: 100%;
			left: 0;
			box-shadow: 1px 1px 30px 1px silver;
		}
		.menu__menu-lvl2.menu__menu-lvl2--active {
			display: block;
			color: red;
		}
	</style>

	<ul class="menu">
		<li class="menu__item">
			<div class="menu__name">item1</div>
			<ul class="menu__menu-lvl2">
				<li>item1__lvl2__item1</li>
				<li>item1__lvl2__item2</li>
				<li>item1__lvl2__item3</li>
			</ul>
		</li>
		<li class="menu__item">
			<div class="menu__name">item2</div>
			<ul class="menu__menu-lvl2">
				<li>item2__lvl2__item1</li>
				<li>item2__lvl2__item2</li>
				<li>item2__lvl2__item3</li>
			</ul>
		</li>
		<li class="menu__item">
			<div class="menu__name">item3</div>
			<ul class="menu__menu-lvl2">
				<li>item3__lvl2__item1</li>
				<li>item3__lvl2__item2</li>
				<li>item3__lvl2__item3</li>
			</ul>
		</li>
		<li class="menu__item">
			<div class="menu__name">item4</div>
		</li>
	</ul>

let menuItems = document.querySelectorAll('.menu__item');
		for (let menuItem of menuItems) {
			menuItem.onclick = function (evt) {
				evt.preventDefault();
				for (let menuItemRemove of menuItems) {
					if (menuItemRemove !== this) {
						menuItemRemove.classList.remove('menu__item--active');
						let menuItemRemoveExists = menuItemRemove.querySelector('.menu__menu-lvl2');
						if (menuItemRemoveExists) {
							menuItemRemoveExists.classList.remove('menu__menu-lvl2--active');
						}
					}
				}
				this.classList.toggle('menu__item--active');
				// console.log(this.parentElement.parentElement);
				if (this.querySelector('.menu__menu-lvl2')) {
					this.querySelector('.menu__menu-lvl2').classList.toggle('menu__menu-lvl2--active');
				}
			}
		}

Подскажите насколько правильно написан js и насколько можно его сократить. Спасибо