1
以下のToggleList javascript関数を使用して、一連の拡張可能なドロップダウンタブがあります。タブが閉じているときにexpand.pngを表示したいと思います。開いているときにclose.pngを表示したいと思います。今はどんな助けにも感謝します。expandableリスト - 拡大時に表示される画像を変更する#
以下のコードは、ドロップダウンメニューを最小化して表示しますが、pngファイルを切り替えることはありません。
全ジャバスクリプト+ HTML:
<script type="text/javascript">
function ToggleList(IDS) {
HideRange('ulist','div',IDS); // not required unless using 'HideRange()' below
var CState = document.getElementById(IDS);
if (CState.style.display != "block") { CState.style.display = "block"; }
else { CState.style.display = "none"; }
// get a reference to the image contained in the <a> that was just clicked
var img = this.getElementsByTagName('img')[0];
// switch the graphic, if it's expand set it to collapse, otherwise expand
img.src = img.src == "expand.png" ? "minimize.png" : "expand.png";
}
function HideRange(sect,elTag,IDS) {
var ContentObj = document.getElementById(sect);
var AllContentDivs = ContentObj.getElementsByTagName(elTag);
}
</script>
<ul id="ulist">
<li><a href="#expand" onclick="ToggleList('expand0')"><p><img src="expand.png"/> Subject</p></a></li>
<div id="expand0" class="divInfo">Text</div>
<li><a href="#expand" onclick="ToggleList('expand1')"><p><img src="expand.png"/> Subject</p></a></li>
<div id="expand1" class="divInfo">Text</div>
<li><a href="#expand" onclick="ToggleList('expand3')"><p><img src="expand.png"/> Subject</p></a></li>
<div id="expand3" class="divInfo">Text</div>
</ul>
。タブは展開されなくなりました\最小化します。 – michelle
構文エラーを確認する手段があるだけならば! (コンソールを確認してください) – James
私はコードを分けて別のhtmlファイルに入れました。 https://pastebin.com/rwjcgbjpは私が今使っているものです。タブは現在折りたたみ+最小化されていますが、画像(展開と折りたたみ)は変わりません。いつでもexpand.png – michelle