클래스명의 일부를 토글하는 방법?

sinbi

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2018-08-19 (일) 00:49:02 3,041

<li>

<li>

li 요소를 클릭하면
저 위의 갈색 부분이 토글로 사라졌다 나타났다 하려는데,

어떻게 하는지?

※ 전제: li가 for 반복문으로 여러 개 생성되어 있어서, 해당 메뉴만 바뀌어야 .....

attr, toggleClass , addClass, removeClass 등 명령어 경우엔,

제가 원하는 걸 할 수 없더라구요 (?)

제이쿼리 jquery

답변 2개 / 댓글 7개

채택된 답변

+20 포인트

탈퇴회원

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2018-08-19 (일) 04:52:56

Copy

$(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');
        }
    });
});

답변에 대한 댓글 1개

sinbi

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2018-08-19 (일) 05:22:14

감사합니다. 덕분에 공부가 많이 되었습니다. ^^

쟁반짜장

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2018-08-19 (일) 02:22:25

Copy

$(function() {
    $("li").on("click", function() {
        $("li i").addClass("fa-folder-open");
        $(this).children("i").removeClass("fa-folder-open");
    });
});

이렇게 하시면 되지 않을까요?

답변에 대한 댓글 6개

sinbi

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2018-08-19 (일) 02:26:31

왕계란 님 답변 감사합니다.
근데, 위 코드 경우 아래 두 소스가 상호 토글 되나요?
얼핏 봐선 안 될 것 같은뎅...

왕계란

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2018-08-19 (일) 10:19:53

[code]
$(function() {
$("li").on("click", function() {
$("li i").removeClass("fa-folder").addClass("fa-folder-open");
$(this).children("i").removeClass("fa-folder-open").addClass("fa-folder");
});
});
[/code]
제가 없애기만 하고 넣는 건 안 했네요.
위처럼 하시면 아마 될 것 같습니다.