jquery - 如何使用 jquery 将两个类更改为另一个类？

Question

<分区>

Answer 1

I want when user click on span with ColOpen class replace it with ColClosed and hide ul. but i don't know how to know what span the user clicked

您可以通过监视对容器元素(例如， TreeView )的点击并告诉 jQuery 仅在该点击是在 .CollOpen 或 .CollClosed 上通知您来做到这一点 跨度(这称为事件委托(delegate)):

$(".treeView").on("click", ".CollOpen, .CollClosed", function() {
    // ...
});

在事件处理程序中，this 将是被单击的范围，因此我们可以使用它来切换类并隐藏以下 ul:

$(this).toggleClass("CollOpen CollClosed").nextAll('ul').first().toggle();

所以:

$(".treeView").on("click", ".CollOpen, .CollClosed", function() {
    $(this).toggleClass("CollOpen CollClosed").nextAll('ul').first().toggle();
});

例子:

$(".treeView").on("click", ".CollOpen, .CollClosed", function() {
      $(this).toggleClass("CollOpen CollClosed").nextAll('ul').first().toggle();
});

.treeView {
  -moz-user-select: none;
  position: relative;
}
.treeView ul {
  margin: 0 0 0 -1.5em;
  padding: 0 0 0 1.5em;
}
.treeView ul ul {
  background: url('http://kaminet.ir/img/list-item-contents.png') repeat-y left;
}
.treeView li.lastChild > ul {
  background-image: none;
}
.treeView li {
  margin: 0;
  padding: 0;
  background: url('http://kaminet.ir/img/list-item-root.png') no-repeat top left;
  list-style-position: inside;
  list-style-image: url('http://kaminet.ir/img/button.png');
  cursor: auto;
}
.treeView li.CollOpen {
  list-style-image: url('http://kaminet.ir/img/button-open.png');
  cursor: pointer;
}
.treeView li.CollClosed {
  list-style-image: url('http://kaminet.ir/img/button-closed.png');
  cursor: pointer;
}
.treeView li li {
  background-image: url('http://kaminet.ir/img/list-item.png');
  padding-left: 1.5em;
}
.treeView li.lastChild {
  background-image: url('http://kaminet.ir/img/list-item-last.png');
}
.treeView li.CollOpen {
  background-image: url('http://kaminet.ir/img/list-item-open.png');
  ÷
}
.treeView li.CollOpen.lastChild {
  background-image: url('http://kaminet.ir/img/list-item-last-open.png');
}

<ul class="treeView">
  <li>
    <span class="CollOpen">[*]</span><span>Collapsible lists</span>
    <ul class="CollList">
      <li>
        <span class="CollClosed">[*]</span><span>Actions</span>
        <ul class=" CollList" style="display: none;">
          <li class="lastChild">
            <span class="CollOpen">[*]</span><span>Actions</span>
            <ul class="CollList" style="display: none;">
              <li class="">Expanding/opening</li>
              <li class="lastChild">Collapsing/closing</li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="lastChild">
        <span class=" CollOpen">[*]</span><span>Actions</span>
        <ul class="CollList" style="display: none;">
          <li class="">Directory listings</li>
          <li class="">Tree views</li>
          <li class="lastChild">Outline views</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

请注意，尽管如此，我必须将 [*] 添加到 span 中，否则它们将没有宽度并且无法被点击。

我建议与其在 .CollOpen 和 .CollClosed 之间切换，不如让事物以一种方式呈现(打开或关闭)并在 li 将渲染切换为另一种方式。我会让 li 中的跨度保持一致。 (不要认为我会使用实际的元素符号作为扩展/收缩指示器，但这是一种风格。)