햄버거 메뉴를 만들고 있는데 클릭한 메뉴 외에 다른 곳의 속성을 변경하려면 어떻게 해야할까요?

구조는 이렇습니다.

<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 는 숨기는 그런 형식인데요.

보여주는 것까지는 되는데 그 외에 m2는 숨기는게 불가능하네요...ㅠㅠ

제가 만든 html이 아니라 저런 형식에서는 어떻게 해야하는지 막막합니다.

도와주세요 고수님들

 $(".m2").hide();
    $(".dd").on("click",function(){
        $(this).next().show();
        $(this).next().siblings().find(".m2").hide();
    });