Question

我有一个使用此代码段的树视图。我有CollOpen或CollClosed类。我如何更改CollOpen CollClosed，反之亦然？在具有这两个类别的跨度点击中？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我希望当用户点击带有ColOpen类的span时，用ColClosed替换它并隐藏ul。但我不知道如何知道用户点击的范围

你可以通过观察点击容器元素（例如，树视图）并告诉jQuery仅在.CollOpen或.CollClosed范围内点击时通知您（这是称为事件委托）：

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

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，我必须在{span}中添加[*]，否则它们没有宽度，无法点击。

我建议您不要在.CollOpen和.CollClosed之间切换，而只需要渲染一种方式（打开或关闭）并使用li上的类来切换渲染另一方面。我在li s内的跨度是一致的。（不要以为我会使用实际的子弹作为扩展/收缩指标，但那是一种风格的东西。）

Answer 2

if($(this).hasClass('CollOpen')
{
$(this).removeClass('CollOpen')
$(this).addClass('CollClosed')
}
else
{
$(this).removeClass('CollClosed')
$(this).addClass('CollOpen')
}

请注意你的css中有错误

.treeView li.CollOpen { 背景图像：URL（ 'http://kaminet.ir/img/list-item-open.png'）; <强>÷ }

如何使用jquery更改另一个类？

2 个答案: