removeClass（）は完全にこれは私の前の質問のオフビルドであるDOM

Question

から要素を削除しています。動作は拡張可能なメニューです。私はクラスを追加したり削除したりしてこれをやっています。なんらかの理由で...サブリストにある - は、クラスをトグルするのではなく、の<li>要素をDOMから完全に削除します。それはなぜそれをするだろう！

あなたは、以下の例を参照することができます：私は、それを彼らは最初のオープンに表示しないように、メインセクションと区別するために、別のクラス名を与えている

$(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>

を私はそれがなぜそれが振る舞っているのか分からない。これについてもっと良い方法があるようですが、私はそれがどうなるのか分かりません。

UPDATE：私は有効なHTMLを持っていなかったと指摘しました。 Fixed it following this thread.まだ壊れています。

更新番号2：問題が.text()だと思われますので、すべてを完全に消去しますか？私はそれがちょうどテキストノードを置き換えたと思って、それはすべての子供です。私は.html()を試しましたが、同じことをします。どのような方法を使ってテキストを置き換えるだけですか？

UPDATE＃3 - 私はより具体的なセレクターが必要でした。私はリストアイテムに.more-or-lessのクラスを与えましたが、それは全く拡張しません。

Answer 1

もっと厳しいセレクターを使用したいと思うかもしれません。

例では、.sub-expanderを使用して、テキストを置き換えるノードを選択します。しかしこれはul.sub-expanderと一致します。

あなたはそれはあなたができる最も簡単な方法は、より具体的なセレクタを使用することであろうli.sub-expanderのテキスト置換したいので： $("li.sub-expander").text("Show Less");または（より良い）をは、あなたが別のものを置換するテキストを含むノードを与えますclassname、id、または他の識別子を使用して、異なる要素を対象とすることを防ぎます。