このリストのトグルに問題があります:
<div id="list">
<div id="segment"> // <--- when clicked, toggle segm_content and opener
<div id="opener">
<img src="images/open.png" /> // changes when toggled
</div>
<div id="segm_content">
// content to hide/show
</div>
</div>
<div id="segment"> // <--- when clicked, toggle segm_content and opener
<div id="opener">
<img src="images/open.png" /> // changes when toggled
</div>
<div id="segm_content">
// content to hide/show
</div>
</div>
... //and so on
</div>
「#segment」をクリックして子 *「#segm_content」* を切り替え、「#opener」で img を変更したい。
このコードで動作するようにしました:
$('#segment').toggle(function() {
$('#opener').html('<img src="images/open.png"/>');
$('#segm_content').hide(500);
}, function() {
$('#opener').html('<img src="images/close.png"/>');
$('#segm_content').show(500);
});
しかし、一度に 1 つの「#segment」に対してのみ行う方法がわかりません。
このコードはすべてを切り替えますが、これは望ましくありません。
この時点で立ち往生しています。何か提案をお願いします。
どうもありがとう!