＜アコーディオンメニュー＞他要素の削除

Question

前提・実現したいこと

アコーディオンメニューにて
他のメニューをクリックしたらすでに開いているメニューを閉じたいです。

該当のソースコード

	<main>
		<ul class="menu">
			<li>
				<a>親メニュー1</a>
				<ul>
					<li><a>子リスト1</a></li>
					<li><a>子リスト2</a></li>
					<li><a>子リスト3</a></li>
				</ul>
			</li>

			<li>
				<a>親メニュー2</a>
				<ul>
					<li><a>子リスト1</a></li>
					<li><a>子リスト2</a></li>
					<li><a>子リスト3</a></li>
				</ul>
			</li>

			<li>
				<a >親メニュー3</a>
				<ul>
					<li><a>子リスト1</a></li>
					<li><a>子リスト2</a></li>
					<li><a>子リスト3</a></li>
				</ul>
			</li>
		</ul>
	</main>

@charset "utf-8";

* {
	margin: 0;
	padding: 0;
	font-size: 20px;
	text-decoration: none;
	list-style-type: none;
}

a {
	color: #333;
}

main {
	max-width: 1000px;
	width: 100%;
	margin: 50px auto;
	background-color: #eee;
	padding: 20px;
	border-radius: 5px;
}

.menu ul {
	display: none;
}

.menu ul.active {
	display: block;
}

.menu a {
	transition: .3s;
}

.menu a:hover {
	opacity: 0.7;
}

.menu > li > a {
	display: flex;
	justify-content: space-between;
	padding: 10px;
	background-color: #ccc;
}

.menu > li > a::after {
	content: ">";
	transform: rotate(90deg);
}

.menu > li > .active::after {
	transform: rotate(-90deg) translateY(-3px);
}

.menu > li >ul a {
	padding: 10px;
	display: block;
	background-color: #aaa;
}

const parentMenu = document.querySelectorAll(".menu > li > a");

for(let i = 0; i < parentMenu.length; i++) {
	parentMenu[i].addEventListener("click", function(e)
		this.classList.toggle("active");
		this.nextElementSibling.classList.toggle("active");
	})
}

試したこと

一度クラスactiveとついたものを取得して、toggleでクラスをつける前にクラスをリセットする形にしてみました

const parentMenu = document.querySelectorAll(".menu > li > a");

const activeElement = document.getElementsByClassName("active")


for(let i = 0; i < parentMenu.length; i++) {
	parentMenu[i].addEventListener("click", function(e){
		e.preventDefault();
	    activeElement.classList.remove("active")
		this.classList.toggle("active");
		this.nextElementSibling.classList.toggle("active");
	})
}

そうすると今度はピクリとも動かず下記のエラーが出てしまいました。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read properties of undefined (reading 'remove')
    at HTMLAnchorElement.<anonymous>

Javascriptへの理解が浅く、実現するために他にどういった考え方や挙動がいるのかわかりません…
どうかご教示お願いいたします。

Answer 1

getElementsByClassName は、HTMLCollection を返します。Element を返しません。
ですので、document.getElementsByClassName("active").classListはundefinedです。

        var test = parentDOM.getElementsByClassName("test"); // 一致する要素のリストであり、要素自身では*ない*
        console.log(test); //HTMLCollection[1]

        var testTarget = parentDOM.getElementsByClassName("test")[0]; // 求める最初の要素
        console.log(testTarget); //<p class="test">hello world 2</p>

クラスが 'test' である最初の要素を取得する | Document.getElementsByClassName() - Web API | MDN

parentMenu に対して行っているように、配列のように扱う必要があります。

Answer 2

まず、
const activeElement = document.getElementsByClassName("active")

最初に記述すると読み込み時の該当要素を取得します。クリックしたときのものと一致するとは限りません。

clickイベント内に記述する必要があります。

また、他の方の指摘があるように getElementsByClassName は要素のコレクションを返します。
今回の場合は、開いているメニューは一つ以下なので、querySelectorメソッドを使うといいでしょう。
これだと見つかった最初の要素を返します。（見つからない場合はNull）

---

this.nextElementSibling.classList.toggle("active");

クリックした次の兄弟要素を操作してますが、これは CSSの隣接兄弟結合子(+)で指定できるのそちらを使った方かコードがシンプルになります。

/* .menu ul.active { * 下記に修正/
.menu a.active + ul {
  display: block;
}

const parentMenu = document.querySelectorAll(".menu > li > a");
for(let i = 0; i < parentMenu.length; i++) {
  parentMenu[i].addEventListener("click", function(e){
    var active = document.querySelector(".menu > li > a.active");
    if(active) {active.classList.remove("active")}
    
    if(!this.isEqualNode(active)){this.classList.add("active")}
  })
}

Comments

[Lhankor_Mhy]

横からすみません。

> 最初に記述すると読み込み時の該当要素を取得します

Document.getElementsByClassName() はライブだと思います。
https://developer.mozilla.org/ja/docs/Web/API/HTMLCollection

[hatena19]

そうなんですね。誤解してました。
querySelectorAll() は静的なので同じだと思ってました。