removeClass()는 완전히이 내 앞의 질문 떨어져 빌드입니다 DOM

Question

에서 요소를 삭제한다 : Select a child of a child

지금 다른 <ul> 내에서 <ul> 있습니다. 동작은 확장 가능한 메뉴입니다. 클래스 추가 및 제거로이 작업을 수행하고 있습니다. 어떤 이유로 든 ... 하위 목록에서 - 은 DOM을 사용하지 않고 DOM을<li> 개의 요소에서 완전히 제거합니다. 왜 그렇게 할거야!?

당신은 아래의 예를 볼 수 있습니다

: 나는 그것을 그들이 초기 개방에 표시되지 않도록 메인 섹션에서 차별화하기 위해 별도의 클래스 명을주는거야

$(function() { 
 
    // main expansion element 
 
    $(".expander").click(function() { 
 
    var subShown = $("ul > li", this).hasClass("show"); 
 
    if (!subShown) { 
 
     $(".indented", this).slideDown('100').addClass("show"); 
 
     $(".caret", this).addClass("reversedCaret"); 
 
    } else { 
 
     $(".indented", this).slideUp('100').removeClass("show"); 
 
     $(".caret", this).removeClass("reversedCaret"); 
 
    } 
 
    }); 
 

 
    // sub expansion element 
 
    $(".sub-expander, .caret").click(function() { 
 
    var subSelectText = $(".sub-expander").text(); 
 
    if (subSelectText != "More") { 
 
     $(".indented--sub", this).slideUp('100').removeClass("show"); 
 
     $(".caret", this).removeClass("reversedCaret"); 
 
     $(".more-or-less").text("More"); 
 
    } else { 
 
     $(".indented--sub", this).slideDown('100').addClass("show"); 
 
     $(".caret", this).removeClass("reversedCaret"); 
 
     $(".more-or-less").text("Show Less"); 
 
    } 
 
    }); 
 

 
    // stop propagation on the link element within .expander class 
 
    $(".indented").click(function(event) { 
 
    event.stopPropagation(); 
 
    }); 
 
});

.expander:hover { 
 
    cursor: pointer; 
 
} 
 

 
.sub-expander--indented { 
 
    padding: 0 0 0 23px; 
 
} 
 

 
.sub-caret { 
 
    margin-right: 75px; 
 
} 
 

 
.indented, 
 
.indented--sub { 
 
    display: none; 
 
} 
 

 
.show { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 

 
<div class="expander"> 
 
    <span class="caret downCaret right visibleCaret">+</span> 
 
    <ul> 
 
    <li class="category">Item 1 
 
     <a href="http://www.google.com"></a> 
 
    </li> 
 
    <li class="indented"><a href="http://www.google.com">Item 2</a></li> 
 
    <li class="indented"><a href="http://www.google.com">Item 3</a> 
 

 
    <ul class="sub-expander indented more" style="padding-top: 
 
0px;"> 
 
     <li class="indented--sub"><a href="http://www.google.com" class="moreLiAs">Chapter 5</a></li> 
 
     <li class="indented--sub"><a href="http://www.google.com" class="moreLiAs">Chapter 6</a></li> 
 
     <li class="indented--sub"><a href="http://www.google.com" class="moreLiAs">Chapter 7</a></li> 
 
     <span class="sub-caret moreCaret visibleLessCaret right">+</span> 
 
     <li class="more-or-less less sub-expander-- 
 
indented">More</li> 
 
    </ul> 
 
    </li> 
 
    </ul> 
 
</div>

, 그래서 왜 그것이 어떻게 행동하고 있는지 나는 잘 모르겠습니다. 이 문제를 해결할 더 좋은 방법이있는 것 같지만 그게 무엇인지 모릅니다.

업데이트 : 유효한 HTML이 없음을 지적했습니다. 여전히 고장났습니다.

업데이트 번호 2 : 문제가 .text() 인 것 같습니다. 그러면 모든 것이 완전히 지워 집니까? 난 그냥 텍스트 노드를 대체 생각하고, 그것의 모든 아이들이 아니에요. 나는 .html()을 시도했지만 똑같은 일을합니다. 그러면 텍스트를 바꾸기 위해 어떤 방법을 사용합니까?

업데이트 # 3 - 하나의 대답은 내가 더 구체적인 선택기를 필요로 제안합니다. 나는 목록 항목에 .more-or-less 클래스를 주었지만 그렇게하는 것은 전혀 확장되지 않습니다.

Answer 1

더 엄격한 선택기를 사용하는 것이 좋습니다.

예를 들어, .sub-expander을 사용하여 텍스트를 바꿀 노드를 선택하십시오. 그러나 이것은 ul.sub-expander과 일치합니다. 당신이이 li.sub-expander 좀 더 구체적인 선택기를 사용하는 것입니다 할 수있는 가장 간단한 일의 텍스트 대체 할 때문에

: $("li.sub-expander").text("Show Less"); 또는 을 (더 나은)는 다른 대체 할 텍스트를 포함하는 노드를 제공 classname, id 또는 다른 식별자를 대상으로하는 다른 식별자.