如何在单击标题时展开/折叠树节点？

<ul>
  <li>
    <span class="title">节点1</span>
    <ul>
      <li>子节点1</li>
      <li>子节点2</li>
    </ul>
  </li>
  <li>
    <span class="title">节点2</span>
    <ul>
      <li>子节点3</li>
      <li>子节点4</li>
    </ul>
  </li>
</ul>

ul ul {
  display: none; /* 默认隐藏子列表 */
}

ul li.open > ul {
  display: block; /* 当父节点有.open类时显示子列表 */
}

// 获取所有标题元素
var titles = document.getElementsByClassName('title');

// 绑定单击事件处理程序
for (var i = 0; i < titles.length; i++) {
  titles[i].addEventListener('click', function() {
    var parent = this.parentNode;
    if (parent.classList.contains('open')) {
      parent.classList.remove('open'); // 移除.open类，折叠节点
    } else {
      parent.classList.add('open'); // 添加.open类，展开节点
    }
  });
}