[응용질문]햄버거 메뉴를 만들고 있는데 클릭한 메뉴 외에 다른 곳의 속성을 변경하려면 어떻게 해야할까요?
본문
구조는 이렇습니다.
<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");
}
});
답변 1
.dd의 부모 li의 siblings의 m2에 removeclass 'down'하면 될것같아요
$(this).parent().siblings().find('.m2').removeClass('down'); 이거를 넣어보세요~
안먹네요 ㅠㅠ
