Bascule UL fonctionnant en FF et non en IE 7

Question

J'ai une liste qui permet de basculer sans problème dans FF. J'ai besoin de cet IE pour qu'il soit prêt pour la production.

Il semble (IE) d'appliquer le js au premier #orderItem et le premier #familiy seulement. Le reste des éléments de la liste est ignoré.

Toute aide serait géniale.

Un morceau de HTML (grande liste):

<div class="classificationContainer"> 

     <ul class="classification" id="orderUL"> 

     <li id="orderItem" class="ordrheading"> 
      <div class="order"> 

       <a href="?nav=search_recherche&amp;lang=en"> 

    <img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_closedc.gif" alt="By Classification" id="OrdListImage" /> 

        Apodiformes (Swifts and Hummingbirds) 
       </a> 
      </div> 

        <ul class="classification" id="FamilyList"> 

        <li id="familiy"> 
         <div class="family"> 
          <a href="?nav=search_recherche&amp;lang=en"> 


    <img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_closedc.gif" alt="Family" id="FamListImage" /> 

           Apodidae (Swifts) 
          </a> 
         </div> 

           <ul class="classification" id="SpiecesList"> 

           <li> 
            <img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_leafc.gif" alt="Species" /> 
            <a href="?lang=en&amp;nav=bird_oiseaux&amp;aou=423"> Chimney Swift (Chaetura pelagica) </a> 

           </li> 

           </ul> 

        </li> 

        <li id="familiy"> 
         <div class="family"> 
          <a href="?nav=search_recherche&amp;lang=en"> 

    <img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_closedc.gif" alt="Family" id="FamListImage" /> 

           Trochilidae (Hummingbirds) 
          </a> 

         </div> 

           <ul class="classification" id="SpiecesList"> 

           <li> 
            <img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_leafc.gif" alt="Species" /> 
            <a href="?lang=en&amp;nav=bird_oiseaux&amp;aou=428"> Ruby throated Hummingbird (Archilochus colubris) </a> 
           </li> 

           <li> 
            <img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_leafc.gif" alt="Species" /> 

            <a href="?lang=en&amp;nav=bird_oiseaux&amp;aou=433"> Rufous Hummingbird (Selasphorus rufus) </a> 
           </li> 

           </ul> 

        </li> 

        </ul> 

     </li></ul></div> 

Je les fonctions jquery suivantes:

<script type="text/javascript"> 
    $(document).ready(function() { 
    // toggle action for the order to familiy 
    $("li#orderItem").click(function (event) { 
     // toggle the image 
     var src = ($("#OrdListImage", this).attr("src") == "/images/node_closedc.gif") 
       ? "/images/node_openc.gif" 
       : "/images/node_closedc.gif"; 
     $("img#OrdListImage", this).attr("src", src); 

     //toggle the ul 
     $('ul#FamilyList', this).toggle($('ul#FamilyList', this).css('display') == 'none'); 

     // stop all link actions 
     return false; 
    }); 

    //toggle action from familiy to speices 
    $("li#familiy").click(function() { 
     // toggle the image 
     var src = ($("#FamListImage", this).attr("src") == "/images/node_closedc.gif") 
       ? "/images/node_openc.gif" 
       : "/images/node_closedc.gif"; 
     $("img#FamListImage", this).attr("src", src);    
     //toggle the ul 
     $('ul#SpiecesList', this).toggle($('ul#SpiecesList', this).css('display') == 'none'); 

     // stop all link actions 
     return false; 
    }); 


}); 

Answer 1

Vérifiez également si les ID ne sont pas répétés (il n'y a qu'un seul #orderItem, seulement un #familiy et etc.). L'attribut "id" doit être unique dans le document html, "class" peut être répété.

Answer 2

La fonction bascule fournie par jQuery est pas garanti . J'ai perdu la référence où j'ai lu ceci (était sur la page d'accueil de jQuery). J'ai rencontré le même problème et (comme suggéré par jQuery) mis en œuvre ma propre fonction toggle. Je suggère d'essayer cela, car ce n'est pas beaucoup de travail et pourrait vous fournir une solution.