js+jq

by qwerew0

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<ul class="gnb">
	<li><a href="#">회사소개</a>
		<ul class="sub">
			<li><a href="#">submenu1</a></li>
			<li><a href="#">submenu2</a></li>
			<li><a href="#">submenu3</a></li>
			<li><a href="#">submenu4</a></li>
		</ul>
	</li>
	<li><a href="#">제품소개</a>
		<ul class="sub">
			<li><a href="#">submenu1</a></li>
			<li><a href="#">submenu2</a></li>
			<li><a href="#">submenu3</a></li>
			<li><a href="#">submenu4</a></li>
		</ul>
	</li>
	<li><a href="#">커뮤니티</a>
		<ul class="sub">
			<li><a href="#">submenu1</a></li>
			<li><a href="#">submenu2</a></li>
			<li><a href="#">submenu3</a></li>
			<li><a href="#">submenu4</a></li>
		</ul>
	</li>
	<li><a href="#">다운로드</a>
		<ul class="sub">
			<li><a href="#">submenu1</a></li>
			<li><a href="#">submenu2</a></li>
			<li><a href="#">submenu3</a></li>
			<li><a href="#">submenu4</a></li>
		</ul>
	</li>
</ul>

CSS

*{margin:0;padding:0;}
body{font-size:13px;}

a{text-decoration:none;}
ul,li{list-style:none;}
.gnb{ width:200px; margin:20px auto 0;
	text-align:center;text-indent:10px;
}
.gnb>li>a{
	display:block;
	height:36px;background:#390; cursor:pointer;
	line-height:3em;border-top:1px dotted #fff;
	color:#fff;
}
.gnb .sub li{
	height:36px;line-height:3em;background:#cf9;
}
.gnb .sub li a{
	display:block; width:100%; color:#222;
}
.gnb .sub li:hover{background:#cf0;}
.sub {
	transition: height 0.5s;
	overflow: hidden;
	height: 0px;
}

.sub.on {
	height: 110px;
}

JavaScript

let gnbLiA = document.querySelectorAll(".gnb>li>a");
for (var i = 0; i < gnbLiA.length ; i++) {
	var item1 = gnbLiA[i];
	item1.addEventListener("click", function () {
		//1. 클릭한것 형제요소에 on클래스가 있는지 비교
		var check = this.nextElementSibling.classList.contains("on");
		//2. on 클래스가 없으면 true
		if (!check) {
			var allSub = document.querySelectorAll(".sub");
			for (var j = 0; j < allSub.length; j++) {
			var item2 = allSub[j];
		//3. 모든 item2의 on 클래스 삭제
			item2.classList.remove("on");
			}
		//4. 클릭 요소 다음에 있는것만 check 하기위해 on클래스를 추가한다.
			this.nextElementSibling.classList.add("on");
		} else {
		//	this.nextElementSibling.classList.remove("on");
		}
	});
}