使用ajax和隐藏div加载动态数据

我想创建一些类似于可折叠div的东西来向用户显示或隐藏内容。 我不希望在一次ajax调用中加载内容，因为数据量很大。 每次用户单击一个选项时，ajax调用都会加载数据

我开始使用append创建div。因为我不知道每一个都有多少选择，所以我无法提前构建div

我在附录方面遇到的问题是，当用户单击选项B时，将加载选项b1、b2、b3并创建div。但是，当用户决定返回选项A，然后再返回选项B时，将再次创建div，现在它们是多个div

有人知道怎么做吗

---

正如我在评论中所说，您可以这样做：

选项A
方案B
备选案文C
方案D
$（“#选项b”）。在（“单击”，函数（）{
//如果元素不存在
if（$（'#submenu-b'）.length显示代码段..您可以在追加之前检查元素是否已经存在，并且仅在元素不存在时追加，但我不知道有多少选项可用。这将从json动态加载。因此我无法在选项b上使用，因为可能没有选项b。
<div id="option-a">option A</div>
<div id="option-b">option B</div>
<div id="option-c">option C</div>
<div id="option-d">option D</div>


$("#option-b").on("click",  function(){
    //if element doesn't exist
    if( $('#submenu-b').length <= 0 ){
        //add elemnent
        $("#option-b").append("<span id='submenu-b'><div>B1</div><div>B2</div><div>B3</div></div>");    
    }
})