jQuery，javascript slideToggle（）

Question

我試圖做一個腳本，當你按下文本或圖像崩潰和擴展。這些圖像是一個基本的箭頭，當div展開時，這個箭頭正被向上的箭頭所取代。

我的問題是，當我切換div時文本消失。我應該如何編寫我的代碼，所以標題將保留，不管div是否擴展？我想在幾個div s上使用以下腳本。

此外slideToggle（）函數不能同時工作，我該如何解決？

<script type="text/javascript"> 
     function toggle(divId, switchImgTag) { 
      var ele = document.getElementById(divId); 
      var imageEle = document.getElementById(switchImgTag); 
      $("#" + divId).slideToggle("fast"); 
      if (ele.style.display == "block") { 
       ele.style.display = "none"; 
       imageEle.innerHTML = '<img src="images/arrow_down.png">'; 
      } 
      else { 
       ele.style.display = "block"; 
       imageEle.innerHTML = '<img src="images/arrow_up.png">';      
      } 
     } 
    </script> 

和HTML：

<a id='imageDivLink' href="javascript:toggle('skills', 'imageDivLink');"> 
    <h2>Skills And Expertise</h2> 
    <img class='arrow' src='images/arrow_down.png'> 
</a> 
<div id='skills' style='display:none;'> 
    Lorem Ipsum... 
</div> 

Answer 1

嘗試

function toggle(divId, switchImgTag) { 
    var ele = $("#" + divId); 
    var imageEle = $('#' + switchImgTag).find('img'); 
    if (ele.is(':visible')) { 
     imageEle.attr('src', "images/arrow_down.png"); 
    } else { 
     imageEle.attr('src', "images/arrow_up.png"); 
    } 
    $("#" + divId).slideToggle("fast"); 
} 

演示：Fiddle

Answer 2

問題是 - 你正在使用innerHTML它替換所有的HTML元素，避免使用它append();

Answer 3

首先$的（ 「＃」 + DIVID）.slideToggle（ 「快」）;在你的情況下是無用的，因爲你在它之後手動使用簡單的jQuery進行切換。閱讀http://api.jquery.com/slideToggle/，並且在瞭解它之後，您可以從該點刪除所有內容。

還可以使用「完整」回調在動畫結尾處添加您的「個人風格」。

你的功能應該是這樣的：

function toggle(divId, switchImgTag) { 
     var ele = document.getElementById(divId); 
     var imageEle = document.getElementById(switchImgTag); 
     $("#" + divId).slideToggle('fast', function() { 
      // Change icon. 
      // Change text. 
     }); 
    } 

關於文字，你可以改變它，你現在改變圖像的方式相同。

Answer 4

innerHTML替換整個元素（影響它的子元素）。

所以在img標籤工作像下面

if (ele.style.display == "block") { 
       ele.style.display = "none"; 
       $('.arrow').prop('src', 'images/arrow_down.png'); //change like 

      } 
      else { 
       ele.style.display = "block"; 
       $('.arrow').prop('src', 'images/arrow_up.png'); //change like    
      }