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    
      }