html树形菜单折叠 css,目录树折叠菜单jquery版(复选框)

这两个问题需要分别回答。

首先是HTML树形菜单折叠的CSS实现，可以通过以下代码实现：

HTML结构：

<ul class="tree">
  <li>
    <input type="checkbox" id="folder1" />
    <label for="folder1">Folder 1</label>
    <ul>
      <li><a href="#">File 1.1</a></li>
      <li><a href="#">File 1.2</a></li>
      <li><a href="#">File 1.3</a></li>
    </ul>
  </li>
  <li>
    <input type="checkbox" id="folder2" />
    <label for="folder2">Folder 2</label>
    <ul>
      <li><a href="#">File 2.1</a></li>
      <li><a href="#">File 2.2</a></li>
      <li><a href="#">File 2.3</a></li>
    </ul>
  </li>
</ul>

CSS样式：

.tree ul {
  margin-left: 20px;
  list-style: none;
  display: none;
}

.tree li input[type="checkbox"] + label {
  cursor: pointer;
}

.tree li input[type="checkbox"]:checked ~ ul {
  display: block;
}

其中，通过`display: none`将子节点的UL标签隐藏起来，然后通过`input[type="checkbox"]`和`label`标签实现点击展开/折叠的功能，最后通过`checked`属性和`~`选择器将选中的节点下的子节点UL标签展开。

接下来是目录树折叠菜单jquery版（复选框）的实现，可以通过以下代码实现：

HTML结构：

<ul class="tree">
  <li>
    <input type="checkbox" id="folder1" />
    <label for="folder1">Folder 1</label>
    <ul>
      <li><a href="#">File 1.1</a></li>
      <li><a href="#">File 1.2</a></li>
      <li><a href="#">File 1.3</a></li>
    </ul>
  </li>
  <li>
    <input type="checkbox" id="folder2" />
    <label for="folder2">Folder 2</label>
    <ul>
      <li><a href="#">File 2.1</a></li>
      <li><a href="#">File 2.2</a></li>
      <li><a href="#">File 2.3</a></li>
    </ul>
  </li>
</ul>

jQuery代码：

$(document).ready(function() {
  // 折叠/展开所有节点
  $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
  $('.tree li.parent_li > span').on('click', function(e) {
    var children = $(this).parent('li.parent_li').find(' > ul > li');
    if (children.is(':visible')) {
      children.hide('fast');
      $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
    } else {
      children.show('fast');
      $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
    }
    e.stopPropagation();
  });

  // 处理复选框
  $('.tree li input[type="checkbox"]').on('change', function() {
    var checked = $(this).prop('checked');
    var children = $(this).parent('li.parent_li').find(' > ul > li input[type="checkbox"]');
    children.prop('checked', checked);
  });
});

其中，通过添加`parent_li`类将含有子节点的LI标签标记为父节点，然后使用`click`事件实现点击折叠/展开的功能。同时，通过`change`事件处理复选框的选中状态。