JQuery 循环模拟手风琴

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' class制作圆边等。我需要做的是用户可以单击“Tract”字词或它旁边的一些图像以展开 div 的其余部分。因此，默认情况下，div 中除了带有“Tract”的行之外的所有内容都应该是不可见的。

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

div .results_div{
  display:none;    
}

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

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

谢谢！

Answer 1

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

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

这是我创建手风琴内部内容的循环 -

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>';
}

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

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

JQuery 循环模拟手风琴

JQuery to Simulate Accordion in a Loop

css

jquery

expand

loops

class