JQuery, javascript slideToggle()

Question

J'essaie de créer un script qui s'effondre et se développe lorsque vous appuyez sur le texte ou l'image. Les images sont une flèche basique qui est remplacée par une flèche pointant vers le haut lorsque le div est développé.

Mon problème est que le texte disparaît quand je bascule la div. Comment dois-je écrire mon code, afin que le titre reste, peu importe si le div est développé ou non? Je voudrais utiliser le script suivant sur plusieurs div s.

En outre, la fonction slideToggle() ne fonctionne pas dans les deux sens, comment puis-je résoudre ce problème?

<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> 

Et le code 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

Essayez

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"); 
} 

Démo: Fiddle

Answer 2

problème est - vous utilisez innerHTML il remplace tout votre élément HTML, pour éviter d'utiliser append();

Answer 3

d'abord tous $ ("#" + idDiv) .slideToggle ("rapide"); dans votre cas est inutile, puisque vous faites le basculer manuellement en utilisant jquery simple juste après. Lisez http://api.jquery.com/slideToggle/ et une fois que vous l'aurez compris, vous pourrez simplement tout enlever de ce point.

Utilisez également le rappel "complet" pour ajouter vos "touches personnelles" à la fin de l'animation.

Votre fonction devrait ressembler à ceci:

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

A propos du texte, vous pouvez changer la même façon que vous modifiez actuellement l'image.

Answer 4

innerHTML remplacer tout l'élément (l'affecte des éléments enfants).

Donc, le travail sur l'étiquette img comme ci-dessous

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    
      }