<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;
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js