html 点击三角下拉展开内容

你可以使用 HTML、CSS 和 JavaScript 来实现点击三角形下拉展开内容的效果，具体实现方法如下：

首先，在 HTML 中添加一个带有 id 的 div 容器，用于包含你想要展开的内容，以及添加一个带有 class 的三角形图标，如下所示：

<div id="content">
  <div class="triangle"></div>
  <!-- 这里是你想要展开的内容 -->
</div>

然后，在 CSS 中设置该容器和三角形图标的样式，以及设置展开内容的样式，如下所示：

#content {
  position: relative;
}

.triangle {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 10px solid black;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  cursor: pointer;
}

#content.open .triangle {
  transform: rotate(180deg);
}

#content .content {
  display: none;
}

#content.open .content {
  display: block;
}

上述 CSS 代码中，使用 position 属性将三角形图标定位到容器的右上角，使用 border-* 属性设置三角形的样式，使用 cursor 属性将鼠标样式设置为手型指针。

然后，使用 JavaScript 给三角形图标添加点击事件，当点击三角形图标时，切换容器的 class 为 "open"，从而实现展开内容的效果，如下所示：

const content = document.getElementById("content");
const triangle = document.querySelector(".triangle");

triangle.addEventListener("click", function() {
  content.classList.toggle("open");
});

以上就是实现点击三角形下拉展开内容的方法，希望能对你有所帮助。