javascript - removeClass() 是从 DOM 中完全删除元素

Question

这是我之前问题的基础:Select a child of a child

我现在有一个<ul>在另一个<ul> 。该行为是一个可扩展的菜单。我通过添加和删除类来做到这一点。由于某种原因...在子列表上 - 它完全删除 <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>

我给它一个单独的类名来区别于主要部分，这样它们就不会在初始打开时显示，所以我不确定为什么它会这样。似乎有更好的方法来解决这个问题，但我不知道那会是什么。

更新:有人指出我没有有效的 HTML。 Fixed it following this thread.还是坏了。

更新#2:问题似乎是.text() - 所以它完全抹去了一切？我认为它只是替换了文本节点，而不是它的所有子节点。我试过.html()但它做同样的事情。那么我该用什么方法来替换文本呢？

更新 #3 - 一个答案表明我需要一个更具体的选择器。我给列表项指定了一个类 .more-or-less但这样做，它根本不会扩展。

Answer 1

您可能想使用更严格的选择器。

在您的示例中，您使用 .sub-expander 来选择要替换文本的节点。然而，这与 ul.sub-expander 匹配。

由于您希望它替换 li.sub-expander 的文本，您可以做的最简单的事情就是使用更具体的选择器: $("li.sub-expander").text("Show Less"); 或 (更好) 给出包含要替换另一个类名的文本的节点、id 或其他标识符，以防止定位到不同的元素。