HTML 和 CSS 实现可展开圆盘及子圆盘独立触发事件的方法

在网页设计中，可展开圆盘及子圆盘独立触发事件的效果能为用户带来独特且直观的交互体验。下面将介绍如何使用HTML和CSS来实现这一效果。

在HTML结构方面，我们可以使用无序列表（ul）和列表项（li）来构建圆盘和子圆盘的结构。每个列表项代表一个圆盘或子圆盘元素。例如：

<ul class="disc">
  <li class="main-disc">主圆盘
    <ul class="sub-discs">
      <li class="sub-disc">子圆盘1</li>
      <li class="sub-disc">子圆盘2</li>
    </ul>
  </li>
</ul>

接下来是CSS样式的设置。对于主圆盘，我们可以设置其为圆形，并添加一些基本的样式，如背景颜色、宽度和高度等。

.main-disc {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}

对于子圆盘，同样设置为圆形，并进行定位，使其初始状态下隐藏。

.sub-discs {
  display: none;
}
.sub-disc {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #2ecc71;
  color: white;
  text-align: center;
  line-height: 50px;
  margin-top: 10px;
  cursor: pointer;
}

然后，通过JavaScript来实现交互效果。当点击主圆盘时，显示子圆盘；当点击子圆盘时，触发相应的独立事件。

const mainDisc = document.querySelector('.main-disc');
const subDiscs = document.querySelector('.sub-discs');
mainDisc.addEventListener('click', function() {
  subDiscs.style.display = subDiscs.style.display === 'none'? 'block' : 'none';
});
const subDiscElements = document.querySelectorAll('.sub-disc');
subDiscElements.forEach(function(subDisc) {
  subDisc.addEventListener('click', function() {
    // 这里可以添加子圆盘的独立事件逻辑
    console.log('点击了子圆盘');
  });
});

通过上述HTML、CSS和JavaScript代码的结合，我们就实现了可展开圆盘及子圆盘独立触发事件的效果。这种效果可以应用于各种网页场景，如导航菜单、信息展示等，提升用户体验和页面的交互性。