Question

我现在在另一个<ul>内有一个<ul>。行为是一个可扩展的菜单。我通过添加和删除类来完成此操作。出于某种原因......在子列表上 - 它从DOM中完全删除 <li>个元素，而不仅仅是切换它的类。为什么会那样做？？

您可以在下面看到一个示例：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我给它一个单独的类名来区分主要部分，以便它们在初次打开时不显示，所以我不确定为什么它的行为方式如此。似乎有更好的方法可以解决这个问题，但我不知道会是什么。

更新：有人指出我没有有效的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或其他标识符，以防止定位其他元素。

removeClass（）完全删除了DOM

1 个答案: