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

Question

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

我开始使用append来创建div。由于我不知道每个选项有多少，我无法提前建立div。

附加的问题是当用户点击选项B时，加载选项b1，b2，b3并创建div。但是当用户决定返回选项A然后返回选项B时，会再次创建div，现在它们是多个。

有没有人知道如何做到这一点？

Answer 1

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

EXAMPLE

<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>");    
    }
})