在三重嵌套UL元素上添加切换

<ul id="ul1">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

<ul id="ul2">
  <li>列表项A</li>
  <li>列表项B</li>
  <li>列表项C</li>
</ul>

<ul id="ul3">
  <li>列表项X</li>
  <li>列表项Y</li>
  <li>列表项Z</li>
</ul>

ul {
  display: none; /* 隐藏所有UL元素 */
}

ul.active {
  display: block; /* 显示被选中的UL元素 */
}

// 获取UL元素
var ul1 = document.getElementById("ul1");
var ul2 = document.getElementById("ul2");
var ul3 = document.getElementById("ul3");

// 添加点击事件监听器
ul1.addEventListener("click", function() {
  // 切换显示UL元素
  ul1.classList.add("active");
  ul2.classList.remove("active");
  ul3.classList.remove("active");
});

ul2.addEventListener("click", function() {
  // 切换显示UL元素
  ul1.classList.remove("active");
  ul2.classList.add("active");
  ul3.classList.remove("active");
});

ul3.addEventListener("click", function() {
  // 切换显示UL元素
  ul1.classList.remove("active");
  ul2.classList.remove("active");
  ul3.classList.add("active");
});