在单击父项li时切换子项

是一个常见的前端开发需求，可以通过JavaScript来实现。

首先，我们需要给父项li添加一个点击事件监听器。当父项li被点击时，我们可以通过JavaScript来切换子项的显示和隐藏状态。

下面是一个示例代码：

HTML部分：

<ul>
  <li class="parent">父项1
    <ul class="child">
      <li>子项1</li>
      <li>子项2</li>
      <li>子项3</li>
    </ul>
  </li>
  <li class="parent">父项2
    <ul class="child">
      <li>子项4</li>
      <li>子项5</li>
      <li>子项6</li>
    </ul>
  </li>
</ul>

CSS部分：

.child {
  display: none;
}

JavaScript部分：

// 获取所有父项li元素
var parents = document.querySelectorAll('.parent');

// 遍历父项li元素，为每个父项添加点击事件监听器
parents.forEach(function(parent) {
  parent.addEventListener('click', function() {
    // 切换子项的显示和隐藏状态
    var child = parent.querySelector('.child');
    if (child.style.display === 'none') {
      child.style.display = 'block';
    } else {
      child.style.display = 'none';
    }
  });
});

上述代码中，我们首先通过querySelectorAll方法获取所有的父项li元素，并使用forEach方法遍历每个父项li元素。然后，为每个父项li元素添加点击事件监听器。当父项li被点击时，我们通过querySelector方法获取对应的子项ul元素，并通过修改其display属性来切换子项的显示和隐藏状态。

这种实现方式可以适用于各种前端开发场景，例如导航菜单、折叠面板等。在实际应用中，可以根据具体需求进行样式和交互的定制。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云前端开发服务：https://cloud.tencent.com/product/fe
• 腾讯云云原生服务：https://cloud.tencent.com/product/tke
• 腾讯云数据库服务：https://cloud.tencent.com/product/cdb
• 腾讯云服务器运维服务：https://cloud.tencent.com/product/cvm
• 腾讯云音视频服务：https://cloud.tencent.com/product/tcav
• 腾讯云人工智能服务：https://cloud.tencent.com/product/ai
• 腾讯云物联网服务：https://cloud.tencent.com/product/iotexplorer
• 腾讯云移动开发服务：https://cloud.tencent.com/product/mad
• 腾讯云存储服务：https://cloud.tencent.com/product/cos
• 腾讯云区块链服务：https://cloud.tencent.com/product/baas
• 腾讯云元宇宙服务：https://cloud.tencent.com/product/mu