[응용질문]햄버거 메뉴를 만들고 있는데 클릭한 메뉴 외에 다른 곳의 속성을 변경하려면 어떻게 해야할까요? 채택완료

구조는 이렇습니다.

<li class="d1" df-cate-depth="1">
                            <span class="dd">WITH US<i class="fas fa-angle-down"></i></span>
                            <div class="m2">
                                <ul>
                                    <li df-cate-depth="2"><a href="/member/agreement.html">AGREEMENT</a></li>
                                    <li df-cate-depth="2"><a href="/member/privacy.html">PRIVACY POLICY</a></li>
                                    <li df-cate-depth="2"><a href="/shopinfo/guide.html">GUIDE</a></li>
                                </ul>
                            </div>
                        </li>

.dd를 클릭하게 되면 이에 해당하는 .m2 는 보여주고

그 외에 m2 는 숨기는 그런 형식인데요.

+ 토글 클래스처럼 클래스가 붙어있을때 다시 클릭하면 클래스가 삭제되게 하고싶어서 수정하였습니다.

  뭔가 비슷하게 되는거같긴한데 문제는 클릭한 메뉴(.dd)외의 다른 (.dd)를 클릭하게되면 다른것에 붙은 클래스는 삭제되지만 클릭한것에 대한 클래스는 붙지를 않네요 ㅠㅠ

 $(".dd").on("click",function(){
         if($('.m2').hasClass('down')){
        $('.m2').removeClass("down");
      } else {
      $(".m2").removeClass("down");
      $(this).next().addClass("down");
      }        
    });