2017-05-28 12 views
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> 

答えて

0

ここではこれを実現するための簡単な方法です - どこかに構文エラーが存在しなければならないコードのコメント

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 == "img/expand.png" ? "img/collapse.png" : "img/expand.png"; 
    } 
+0

。タブは展開されなくなりました\最小化します。 – michelle

+0

構文エラーを確認する手段があるだけならば! (コンソールを確認してください) – James

+0

私はコードを分けて別のhtmlファイルに入れました。 https://pastebin.com/rwjcgbjpは私が今使っているものです。タブは現在折りたたみ+最小化されていますが、画像(展開と折りたたみ)は変わりません。いつでもexpand.png – michelle

関連する問題