1

このアコーディオンは、それ自体がページ上にある場合は正常に機能しますが、Web データベースを介して個々のタイトル/コンテンツのペアを動的に入力すると、タイトルとコンテンツが折りたたまれません。実装方法に問題はありますか？

データベースの残りの部分 (辞書用語と定義を 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