클래스명의 일부를 토글하는 방법?
본문
<li>
<i class="fa fa-folder-open fa-lg" aria-hidden="true"></i>
<li>
li 요소를 클릭하면
저 위의 갈색 부분이 토글로 사라졌다 나타났다 하려는데,
어떻게 하는지?
※ 전제: li가 for 반복문으로 여러 개 생성되어 있어서, 해당 메뉴만 바뀌어야 .....
attr, toggleClass , addClass, removeClass 등 명령어 경우엔,
제가 원하는 걸 할 수 없더라구요 (?)
답변 2
$(function(){
$('i.fa-folder, i.fa-folder-open').parent('li').on('click', function(){
var $element = $(this).children('i');
if($element.hasClass('fa-folder') == true){
$element.addClass('fa-folder-open').removeClass('fa-folder');
} else{
$element.addClass('fa-folder').removeClass('fa-folder-open');
}
});
});
감사합니다. 덕분에 공부가 많이 되었습니다. ^^
$(function() {
$("li").on("click", function() {
$("li i").addClass("fa-folder-open");
$(this).children("i").removeClass("fa-folder-open");
});
});
이렇게 하시면 되지 않을까요?
왕계란 님 답변 감사합니다.
근데, 위 코드 경우 아래 두 소스가 상호 토글 되나요?
얼핏 봐선 안 될 것 같은뎅...
<i class="fa fa-folder fa-lg" aria-hidden="true"></i>
<i class="fa fa-folder-open fa-lg" aria-hidden="true"></i>
$(function() {
$("li").on("click", function() {
$("li i").removeClass("fa-folder").addClass("fa-folder-open");
$(this).children("i").removeClass("fa-folder-open").addClass("fa-folder");
});
});
제가 없애기만 하고 넣는 건 안 했네요.
위처럼 하시면 아마 될 것 같습니다.
추가 답변 감사합니다.
적용해보니, 처음 한번은 바뀌는데, 그 후론 클릭해도 바뀌지 않네요.
아무래도, 클래스 유무에 따라 분기를 해줘야 하나봐요.
http://jjiniyam.cafe24.com/aa.html
이렇게 되는 거 아닌가요?
전 잘 되는 것 같은데...
같은 메뉴를 클릭할 때마다 바뀌는 걸 원해서 ^^;;
예를들어,
dddddddddd 클릭하면 이 메뉴의 폴더 모양이 상호전환이 되는 걸 구현하려고 했거든요.
아... 그거면 다른 분이 쓰신 대로 하시는 게 맞겠네요. ㅎㅎ
답변을 작성하시기 전에 로그인 해주세요.
