<li><a href="#" class="m">메뉴1</a>
<ul>
<li><a href="#" class="m">메뉴1_1</a></li>
<ul>
<li><a href="#" class="m">메뉴1_1_1</a></li>
<li><a href="#" class="m">메뉴1_1_2</a></li>
</ul>
<li><a href="#" class="m">메뉴1_2</a>
<ul>
<li><a href="#" class="m">메뉴1_2_1</a></li>
<li><a href="#" class="m">메뉴1_2_2</a></li>
</ul>
</li>
<li><a href="#" class="m">메뉴1_3</a>
<ul>
<li><a href="#" class="m">메뉴1_3_1</a></li>
<li><a href="#" class="m">메뉴1_3_2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" class="m">메뉴2</a>
<ul>
<li><a href="#">메뉴2_1</a></li>
<li><a href="#">메뉴2_2</a></li>
<li><a href="#">메뉴2_3</a></li>
</ul>
</li>
<li><a href="#" class="m">메뉴3</a>
<ul>
<li><a href="#">메뉴3_1</a></li>
<li><a href="#">메뉴3_2</a></li>
<li><a href="#">메뉴3_3</a></li>
</ul>
</li>
$(document).ready(function(){
$("#m_menu a.m").click(function(){
$(this).next().addBack().toggleClass("on").end().find(".m, ul").removeClass("on").end().parent().siblings().find(".m, ul").removeClass("on");
return flase;
})
})
This Pen doesn't use any external CSS resources.