JQuery 在循环中模拟 Accordion

Question

我正在尝试基于以下内容松散地实现解决方案:How can I expand and collapse a <div> using javascript?

但我的代码不同。在一个循环中，我有以下内容:

var results_div_id = "results_tab_div" + i;
var results_html = "<strong>Tract: " + results.features[i].attributes.TRACT + "</strong> <br />";
results_html += "Owner: " + results.features[i].attributes.OWNER + "<br />";
$("#" + results_div_id).html(results_html);
$("#" + results_div_id).addClass("results_div");

如您所见，我正在创建一个新的动态 div，然后用 results_html 变量填充它，然后应用“results_div”类来制作圆边等. 我需要做的是，用户可以单击“Tract”一词或它旁边的一些图像来展开 div 的其余部分。因此，默认情况下，div 中除了带有“Tract”的行之外的所有内容都应该是不可见的。

我尝试应用 display:none 但这隐藏了整个 div——它应该如此。有什么办法吗？这是 CSS

div .results_div{
  display:none;    
}

我试图将带有“Tract”的行作为一个新类的单独 div，然后尝试强制它可见但不起作用——仍然没有任何显示results_html 内容。

顺便说一句，然后在 jquery 选项卡式界面中添加了一堆这些动态创建的循环，一个在另一个下面...

谢谢!

Answer 1

据我了解，您想遍历数据集并根据它们生成 Accordion 。

如果是这样的话，这样的事情可能会有所帮助 - http://jsfiddle.net/jmsessink/c4035syu/

这是我创建 Accordion 内部内容的循环 -

for (x = 0, y = results.features.length; x < y; x++) {
       resultsStr +=
           '<div class="accordion-item">' +
               '<h3>Tract: ' + results.features[x].attributes.TRACT + '</h3>' +
               '<div class="accordion-content">' +
                   '<p>Owner: ' + results.features[x].attributes.OWNER + '</p>' +
               '</div>' +
           '</div>';
}

基本上，我根据您的示例数据制作了一个对象，遍历它，生成一个包含 Accordion 结构元素的字符串，最后将该字符串作为 HTML 插入到 DOM 中已经存在的 Accordion 容器中.然后，您基本上可以选择任何您喜欢的 Accordion 插件并对其进行初始化，或者像我所做的那样(如果它像您提供的链接中的示例一样简单)就自己制作。

希望这是您朝着正确方向迈出的一步。