테스트 사이트 - 개발 중인 베타 버전입니다

클래스명의 일부를 토글하는 방법? 채택완료

sinbi 7년 전 조회 2,781

<li>

   <i class="fa fa-folder-open fa-lg" aria-hidden="true"></i>

<li>

 

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

어떻게 하는지?

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

 

 

 

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

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

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트

</p>

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

        }

    });

});</p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

s
sinbi
7년 전
감사합니다. 덕분에 공부가 많이 되었습니다. ^^

댓글을 작성하려면 로그인이 필요합니다.

</p>

<p>$(function() {

    $("li").on("click", function() {

        $("li i").addClass("fa-folder-open");

        $(this).children("i").removeClass("fa-folder-open");

    });

});</p>

<p>

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 6개

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


<i class="fa fa-folder fa-lg" aria-hidden="true"></i>
<i class="fa fa-folder-open fa-lg" aria-hidden="true"></i>
왕계란
7년 전
[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]
제가 없애기만 하고 넣는 건 안 했네요.
위처럼 하시면 아마 될 것 같습니다.
s
sinbi
7년 전
추가 답변 감사합니다.

적용해보니, 처음 한번은 바뀌는데, 그 후론 클릭해도 바뀌지 않네요.
아무래도, 클래스 유무에 따라 분기를 해줘야 하나봐요.
왕계란
7년 전
http://jjiniyam.cafe24.com/aa.html
이렇게 되는 거 아닌가요?
전 잘 되는 것 같은데...
s
sinbi
7년 전
같은 메뉴를 클릭할 때마다 바뀌는 걸 원해서 ^^;;
예를들어,
dddddddddd 클릭하면 이 메뉴의 폴더 모양이 상호전환이 되는 걸 구현하려고 했거든요.
왕계란
7년 전
아... 그거면 다른 분이 쓰신 대로 하시는 게 맞겠네요. ㅎㅎ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인