1

这个手风琴本身在页面上时工作正常，但是当我通过网络数据库动态填充单个标题/内容对时，标题和内容不会折叠。我实现它的方式有问题吗？

数据库的其余部分（在 2 个不同的字段中插入字典术语和定义）在没有手风琴功能的情况下完美运行。可以理解，我想集成手风琴，这样用户的滚动就更少了。

这是实现的代码，然后是直接从源代码（注释掉）进行比较的代码：

function showRecords() {
  var results = '';
  results.innerHTML = '';
  db.transaction(function(tx) {
     tx.executeSql(selectAllStatement, [], function(tx, result) {
        dataset = result.rows;
        for (var i = 0, item = null; i < dataset.length; i++) {
           item = dataset.item(i);
           results.innerHTML = '<div id="accordion">';
           results.innerhtml += '<h3>' + item['term'] + '</h3><div><p>' + item['definition'] + '<button class="glossaryButton2" onClick="loadRecord('+i+')">Edit</button> <button  class="glossaryButtonDel" style="float:right;" onClick="deleteRecord(' + item['id'] + ')">Delete</button></p><hr></div>';
           }
        });
});
results.innerHTML += '</div>';
// TRIED: $('#accordion').html(results).accordion({collapsible: true});
// TRIED: $("#accordion").accordion({collapsible: true});
// getter
var collapsible = $( "#accordion" ).accordion( "option", "collapsible" );
// setter
$( "#accordion" ).accordion( "option", "collapsible", true );
exportRecords();
}

（$('#accordion').html(results).accordion({collapsible: true}); 的解释：“手风琴调用仅适用于 DOM 中匹配的元素，因为您要添加手风琴动态，没有什么可以匹配的。您需要在加载新内容后重新应用手风琴。“我认为这是我一无所知的地方。）

/* The HTML of original accordion:

<div id="accordion">

   <h3>Section 1</h3>
   <div>
      <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.</p>
   </div>

</div>
*/

上述问题并非 Jquery UI 独有。我在 4-5 部其他 Javascript 手风琴上也遇到了完全相同的问题——我一直在努力！我总是自己尝试手风琴；如果它有效，那么我将它与数据库+innerHTML 集成——并发现它退出崩溃。

（仅供参考：此代码与 Zurb Foundation 3 共享空间，并使用随附的 Jquery。当与数据库分开使用时，它可以与上述 HTML 手风琴版本一起正常工作，所以这不是问题。）

4

0 回答 0