JQuery 在循环中模拟手风琴答案

【问题标题】：JQuery to Simulate Accordion in a LoopJQuery 在循环中模拟手风琴
【发布时间】：2015-06-03 04:43:52
【问题描述】：

我正在尝试基于以下内容松散地实施解决方案：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 的其余部分。因此，默认情况下，除“Tract”行外，div 中的所有内容都应该是不可见的。

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

div .results_div{
  display:none;    
}

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

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

谢谢！

【问题讨论】：

您想在有人点击“区域”时显示所有者详细信息，对吗？还是我理解错了
是的，Owner 和其他一些人将在 Owners 之下；默认隐藏。谢谢！
能否请您提供一个带有静态数据的演示
嗯。不可能很快——数据来自公司来源。页面本身有很多与此相关的 ESRI javascript 代码。我希望我能。谢谢。

标签： jquery css class loops expand

【解决方案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 中已经存在的手风琴容器中.然后，您基本上可以采用任何您喜欢的手风琴插件并对其进行初始化，或者像我所做的那样（如果它与您提供的链接中的示例一样简单）只需自己制作。

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

【讨论】：