jQuery Mobile で折りたたみ可能なリストを実装しました。天気に応じて単に true または false に設定されるか、リストの要素が展開されていない変数を開発しようとしています (つまり、リストのすべての要素が折りたたまれていると false になります)。これを行う唯一の方法は、'expand' および collapse イベントを使用することですが、collapse イベントは、ページの読み込み時にリスト アイテムごとに 1 回発生し、要素がクリックされると複数回発生します。以下は私の現在のコードです。私が間違っていることを教えてくれるか、別のアプローチを提案できますか?
JS:
$("#listElement").bind('collapse', $.proxy(function () {
alert("collapse");
}, this)).bind('expand', $.proxy(function () {
alert("expand");
}, this));
HTML:
<div id='listElement' data-role="collapsible" data-collapsed='true'>
<h3>Header Text</h3>
<p>collaplible content</p>
</div>
アップデート:
以下のコメントは、私の問題の一部が、リストにデータを入力するときに「折りたたみ」ハンドラーを動的に設定しているという事実に起因していることを示しています。以下のコードを参照してください。
JavaScript:
for (var i = 0; i < 10; i++) {
var element = $("#element").clone();
$("#list").append(makeListElement(element));
}
function makeListElement(element) {
element.find('h3').append("Some Html");
element.bind('collapse', $.proxy(function () {
alert("collapse");
}, this)).bind('expand', $.proxy(function () {
alert("expand");
}, this));
}
}
複製された要素:
<div id='element' data-role="collapsible" data-collapsed='true'>
<h3></h3>
<p></p>
</div>