折叠div不会在第一次单击时加载

折叠div是一种常用的前端技术，可以实现点击事件触发div元素的展开和折叠。在第一次单击时不加载的情况下，可以通过以下方式实现：

1. 使用JavaScript监听点击事件，并在事件触发时动态加载div内容。

例如，假设有一个按钮元素和一个要折叠的div元素：

<button onclick="toggleDiv()">点击展开</button>
<div id="myDiv"></div>

在JavaScript中定义toggleDiv函数，通过判断div是否已经加载来决定加载或者移除内容：

function toggleDiv() {
  var div = document.getElementById('myDiv');
  if (div.innerHTML === '') {
    // 加载内容
    div.innerHTML = '这里是折叠div的内容';
  } else {
    // 移除内容
    div.innerHTML = '';
  }
}

1. 使用CSS的:empty伪类选择器来控制空div的样式。

<style>
  #myDiv:empty {
    display: none;
  }
</style>

这样，在第一次单击时，div元素的内容为空，符合:empty选择器的条件，所以会隐藏起来。当第二次单击时，div中有内容了，不再为空，所以会显示出来。

推荐的腾讯云相关产品：腾讯云云函数（SCF）

• 链接地址：https://cloud.tencent.com/product/scf