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. 다른 .sub.on지우기	
		var allSub = document.querySelectorAll(".sub");
		for (var j = 0; j < allSub.length; j++) {
			var item2=allSub[j];//allSub[0],allSub[1],allSub[2],allSub[3]
			item2.classList.remove("on");
		}
		//this 이벤트가 발생한 이거
		console.log(this);
		//2. this 옆에 .sub 는 .on 붙이기
		this.nextElementSibling.classList.add("on");
	});
}