메뉴 클릭시 이미지 변경 방법이 궁금합니다.
본문
https://m.innersignal.co.kr/#; 사이드메뉴의 카테고리를 누르면 +가 -로 변경되고, 또다른 카테고리를 누르면 열려있던 카테고리가 닫히면서 -가 +로 이미지가 변경되게 만들고 싶습니다.
addClass를 이용해서 누르면 이미지가 변경되게 만들었는데요
문제는 다른 카테고리를 누르면 계속 -인채로 유지된다는점입니다.
어떤식으로 고치면 될까요 ?
답변 1
$(".category > li > a").removeClass("on"); // -가 +로 전부적용
$('.category > li >a').parent().siblings('li').children('ul').slideUp(); // 모든 슬라이드 up
이코드를 최상단에 붙어놔보세요.
감사합니다. 그런데 한가지 문제가 더 생겼습니다.
$(".category > li > a").click(function(){
$(".category > li > a").removeClass("on");
$('.category > li >a').parent().siblings('li').children('ul').slideUp();
$(this).addClass("on");
$(this).parent().siblings("li").children("ul");
$(this).next("ul").slideToggle();
$(this).parent().siblings("li").children("ul").slideUp();
});
여기서 말씀해주신 코드를 붙여넣으니
$(".category > li > a").removeClass("on");
$('.category > li >a').parent().siblings('li').children('ul').slideUp();
열려있는 li를 클릭하면 ul이 닫아지다가 다시 열려버리고 다시 버튼이 -에서 +로 바뀌지 않는데 무슨 문제일까요?
$(".category > li > a").not($(this)).removeClass("on");
$('.category > li >a').not($(this)).parent().siblings('li').children('ul').slideUp();
마지막줄에 이거넣어보시고 안되시면 html css 기재부탁합니다.
그리고 addclasss가아니라 toggleClass로하셔야합니다.. slide도마찬가지구요
