jquery - 选中复选框后，Treeview 展开/折叠停止工作

Question

我有一些代码用于显示由<ul>列表组成的树，我需要 2 个按钮来展开和折叠所有树项。此按钮可以正常工作，但是当我单击<li>标签中的复选框时出现问题。之后2个按钮不起作用

如果您检查结果代码并使用展开和折叠按钮，您会发现我的问题。

起初这个按钮效果很好，但是当我们点击一​​个复选框时，按钮根本不起作用。

$(function() {
  $("#tree-collapse-all").click(function() {
    $(".tree input").removeAttr("checked");
  });

  $("#tree-expand-all").click(function() {
    $(".tree input").attr("checked", "checked");
  });
});

ol,
ul {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  list-style: none;
}

body {
  margin: 30px;
  font-family: sans-serif;
}

#fontSizeWrapper {
  font-size: 16px;
}

#fontSize {
  width: 100px;
  font-size: 1em;
}


/* ————————————————————–
  Tree core styles
*/

.tree {
  margin: 1em;
}

.tree input {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

.tree input~ul {
  display: none;
}

.tree input:checked~ul {
  display: block;
}


/* ————————————————————–
  Tree rows
*/

.tree li {
  line-height: 1.2;
  position: relative;
  padding: 0 0 1em 1em;
}

.tree ul li {
  padding: 1em 0 0 1em;
}

.tree>li:last-child {
  padding-bottom: 0;
}


/* ————————————————————–
  Tree labels
*/

.tree_label {
  position: relative;
  display: inline-block;
  background: #fff;
}

label.tree_label {
  cursor: pointer;
}

label.tree_label:hover {
  color: #666;
}


/* ————————————————————–
  Tree expanded icon
*/

label.tree_label:before {
  background: #000;
  color: #fff;
  position: relative;
  z-index: 1;
  float: left;
  margin: 0 1em 0 -2em;
  width: 1em;
  height: 1em;
  border-radius: 1em;
  content: '+';
  text-align: center;
  line-height: .9em;
}

:checked~label.tree_label:before {
  content: '–';
}


/* ————————————————————–
  Tree branches
*/

.tree li:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -.5em;
  display: block;
  width: 0;
  border-left: 1px solid rgb(7, 240, 112);
  content: "";
}

.tree_label:after {
  position: absolute;
  top: 0;
  left: -1.5em;
  display: block;
  height: 0.5em;
  width: 1em;
  border-bottom: 1px solid rgb(79, 7, 247);
  border-left: 1px solid rgb(240, 6, 6);
  border-radius: 0 0 0 .3em;
  content: '';
}

label.tree_label:after {
  border-bottom: 0;
}

:checked~label.tree_label:after {
  border-radius: 0 .3em 0 0;
  border-top: 1px solid rgb(79, 7, 247);
  border-right: 1px solid rgb(240, 6, 6);
  border-bottom: 0;
  border-left: 0;
  bottom: 0;
  top: 0.5em;
  height: auto;
}

.tree li:last-child:before {
  height: 1em;
  bottom: auto;
}

.tree>li:last-child:before {
  display: none;
}

.tree_custom {
  display: block;
  background: #eee;
  padding: 1em;
  border-radius: 0.3em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><a href="#" id="tree-expand-all">Expand all</a> | <a href="#" id="tree-collapse-all">Collapse all</a></p>

<br /><br />
<div id="fontSizeWrapper">
  <label for="fontSize">Font size</label>
  <input type="range" value="1" id="fontSize" step="0.5" min="0.5" max="5" />
</div>
<ul class="tree">
  <li>
    <input type="checkbox" id="c1" />
    <label class="tree_label" for="c1">Level 0</label>
    <ul>
      <li>
        <input type="checkbox" id="c2" />
        <label for="c2" class="tree_label">Level 1</label>
        <ul>
          <li><span class="tree_label">Level 2</span></li>
          <li><span class="tree_label">Level 2</span></li>
        </ul>
      </li>
      <li>
        <input type="checkbox" id="c3" />
        <label for="c3" class="tree_label">Looong level 1 <br />label text <br />with line-breaks</label>
        <ul>
          <li><span class="tree_label">Level 2</span></li>
          <li>
            <input type="checkbox" id="c4" />
            <label for="c4" class="tree_label"><span class="tree_custom">Specified tree item view</span></label>
            <ul>
              <li><span class="tree_label">Level 3</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <input type="checkbox" id="c5" />
    <label class="tree_label" for="c5">Level 0</label>
    <ul>
      <li>
        <input type="checkbox" id="c6" />
        <label for="c6" class="tree_label">Level 1</label>
        <ul>
          <li><span class="tree_label">Level 2</span></li>
        </ul>
      </li>
      <li>
        <input type="checkbox" id="c7" />
        <label for="c7" class="tree_label">Level 1</label>
        <ul>
          <li><span class="tree_label">Level 2</span></li>
          <li>
            <input type="checkbox" id="c8" />
            <label for="c8" class="tree_label">Level 2</label>
            <ul>
              <li><span class="tree_label">Level 3</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

标签： jquerycsscheckbox

Answer 1

问题是因为您正在使用该checked属性，当用户与复选框进行交互时，该属性不会被修改。

如果您更改逻辑以使用checked元素本身的属性，则逻辑可以正常工作：

$(function() {
  $("#tree-collapse-all").click(function() {
    $(".tree input").prop('checked', false);
  });

  $("#tree-expand-all").click(function() {
    $(".tree input").prop("checked", true);
  });
});

ol,
ul {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  list-style: none;
}

body {
  margin: 30px;
  font-family: sans-serif;
}

#fontSizeWrapper {
  font-size: 16px;
}

#fontSize {
  width: 100px;
  font-size: 1em;
}


/* ————————————————————–
  Tree core styles
*/

.tree {
  margin: 1em;
}

.tree input {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

.tree input~ul {
  display: none;
}

.tree input:checked~ul {
  display: block;
}


/* ————————————————————–
  Tree rows
*/

.tree li {
  line-height: 1.2;
  position: relative;
  padding: 0 0 1em 1em;
}

.tree ul li {
  padding: 1em 0 0 1em;
}

.tree>li:last-child {
  padding-bottom: 0;
}


/* ————————————————————–
  Tree labels
*/

.tree_label {
  position: relative;
  display: inline-block;
  background: #fff;
}

label.tree_label {
  cursor: pointer;
}

label.tree_label:hover {
  color: #666;
}


/* ————————————————————–
  Tree expanded icon
*/

label.tree_label:before {
  background: #000;
  color: #fff;
  position: relative;
  z-index: 1;
  float: left;
  margin: 0 1em 0 -2em;
  width: 1em;
  height: 1em;
  border-radius: 1em;
  content: '+';
  text-align: center;
  line-height: .9em;
}

:checked~label.tree_label:before {
  content: '–';
}


/* ————————————————————–
  Tree branches
*/

.tree li:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -.5em;
  display: block;
  width: 0;
  border-left: 1px solid rgb(7, 240, 112);
  content: "";
}

.tree_label:after {
  position: absolute;
  top: 0;
  left: -1.5em;
  display: block;
  height: 0.5em;
  width: 1em;
  border-bottom: 1px solid rgb(79, 7, 247);
  border-left: 1px solid rgb(240, 6, 6);
  border-radius: 0 0 0 .3em;
  content: '';
}

label.tree_label:after {
  border-bottom: 0;
}

:checked~label.tree_label:after {
  border-radius: 0 .3em 0 0;
  border-top: 1px solid rgb(79, 7, 247);
  border-right: 1px solid rgb(240, 6, 6);
  border-bottom: 0;
  border-left: 0;
  bottom: 0;
  top: 0.5em;
  height: auto;
}

.tree li:last-child:before {
  height: 1em;
  bottom: auto;
}

.tree>li:last-child:before {
  display: none;
}

.tree_custom {
  display: block;
  background: #eee;
  padding: 1em;
  border-radius: 0.3em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><a href="#" id="tree-expand-all">Expand all</a> | <a href="#" id="tree-collapse-all">Collapse all</a></p>

<br /><br />
<div id="fontSizeWrapper">
  <label for="fontSize">Font size</label>
  <input type="range" value="1" id="fontSize" step="0.5" min="0.5" max="5" />
</div>
<ul class="tree">
  <li>
    <input type="checkbox" id="c1" />
    <label class="tree_label" for="c1">Level 0</label>
    <ul>
      <li>
        <input type="checkbox" id="c2" />
        <label for="c2" class="tree_label">Level 1</label>
        <ul>
          <li><span class="tree_label">Level 2</span></li>
          <li><span class="tree_label">Level 2</span></li>
        </ul>
      </li>
      <li>
        <input type="checkbox" id="c3" />
        <label for="c3" class="tree_label">Looong level 1 <br />label text <br />with line-breaks</label>
        <ul>
          <li><span class="tree_label">Level 2</span></li>
          <li>
            <input type="checkbox" id="c4" />
            <label for="c4" class="tree_label"><span class="tree_custom">Specified tree item view</span></label>
            <ul>
              <li><span class="tree_label">Level 3</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <input type="checkbox" id="c5" />
    <label class="tree_label" for="c5">Level 0</label>
    <ul>
      <li>
        <input type="checkbox" id="c6" />
        <label for="c6" class="tree_label">Level 1</label>
        <ul>
          <li><span class="tree_label">Level 2</span></li>
        </ul>
      </li>
      <li>
        <input type="checkbox" id="c7" />
        <label for="c7" class="tree_label">Level 1</label>
        <ul>
          <li><span class="tree_label">Level 2</span></li>
          <li>
            <input type="checkbox" id="c8" />
            <label for="c8" class="tree_label">Level 2</label>
            <ul>
              <li><span class="tree_label">Level 3</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>