Search code examples
javascriptjquerymenusubmenu

Migrating menu tree code from jquery 1.7.1 to 1.9.1


I've a js code working with jquery 1.7.1 broken after migration to 1.9.1 You can see the problem on http://jsfiddle.net/QK5Ld/2/.

The code I'm using is this:

$("#navigation li ul").each(function(){
    var that = this;
    $(this).hide();
    $(this).prev().toggle(function() { 
                              $(that).show(); 
                          }, 
                          function() { 
                              $(that).hide(); 
                          }
                     );
})

I read that toggle() is no more supported but I'm no js expert and I've lost many hours trying to complete update this js code.

Any idea? Thank you in advance.

Nicola.

Note: The HTML used is like this:

<div id="navigation">
   <ul>
      <li id="category-2850">
         <a href="/category/archiviazione/">ARCHIVIAZIONE</a>
         <ul>
            <li id="category-3021">
               <a href="/category/archiviazione/archiviazione-modulare/">ARCHIVIAZIONE MODULARE</a>
               <ul>
                  <li id="category-3326"><a href="/category/archiviazione/archiviazione-modulare/scatole-archivio-con-maniglie/">SCATOLE ARCHIVIO CON MANIGLIE</a></li>
                  <li id="category-3022"><a href="/category/archiviazione/archiviazione-modulare/scatole-archivio-in-cartone/">SCATOLE ARCHIVIO IN CARTONE</a></li>
               </ul>
            </li>
            <li id="category-2876">
               <a href="/category/archiviazione/buste-trasparenti/">BUSTE TRASPARENTI</a>
               <ul>
                  <li id="category-2917"><a href="/category/archiviazione/buste-trasparenti/buste-a-perforazione-universale/">BUSTE A PERFORAZIONE UNIVERSALE</a></li>
                  <li id="category-2916"><a href="/category/archiviazione/buste-trasparenti/buste-a-u/">BUSTE A U</a></li>
                  <li id="category-2877"><a href="/category/archiviazione/buste-trasparenti/buste-per-usi-diversi-e-dedicati/">BUSTE PER USI DIVERSI E DEDICATI</a></li>
               </ul>
            </li>
         </ul>
      </li>
      <li id="category-3100">
         <a href="/category/arredamento-e-complementi/">ARREDAMENTO E COMPLEMENTI</a>
         <ul>
            <li id="category-3101">
               <a href="/category/arredamento-e-complementi/complementi-d-arredo/">COMPLEMENTI D'ARREDO</a>
               <ul>
                  <li id="category-3102"><a href="/category/arredamento-e-complementi/complementi-d-arredo/accessori-vari/">ACCESSORI VARI</a></li>
                  <li id="category-3215"><a href="/category/arredamento-e-complementi/complementi-d-arredo/appendiabiti/">APPENDIABITI</a></li>
                  <li id="category-3307"><a href="/category/arredamento-e-complementi/complementi-d-arredo/cestini-e-posacenere/">CESTINI E POSACENERE</a></li>
                  <li id="category-3189"><a href="/category/arredamento-e-complementi/complementi-d-arredo/lampade-da-tavolo/">LAMPADE DA TAVOLO</a></li>
                  <li id="category-3214"><a href="/category/arredamento-e-complementi/complementi-d-arredo/lampade-da-terra/">LAMPADE DA TERRA</a></li>
                  <li id="category-3217"><a href="/category/arredamento-e-complementi/complementi-d-arredo/orologi-barometri-da-scrivania-e-da-parete/">OROLOGI - BAROMETRI DA SCRIVANIA E DA PARETE</a></li>
                  <li id="category-3336"><a href="/category/arredamento-e-complementi/complementi-d-arredo/piante-sintetiche-e-vasi/">PIANTE SINTETICHE E VASI</a></li>
                  <li id="category-3216"><a href="/category/arredamento-e-complementi/complementi-d-arredo/portaombrelli/">PORTAOMBRELLI</a></li>
                  <li id="category-3173"><a href="/category/arredamento-e-complementi/complementi-d-arredo/tappeti-e-zerbini/">TAPPETI E ZERBINI</a></li>
                  <li id="category-3328"><a href="/category/arredamento-e-complementi/complementi-d-arredo/tavolini-e-sedie-zona-ristoro/">TAVOLINI E SEDIE ZONA RISTORO</a></li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
</div>

Solution

  • Your code actually becomes cleaner in 1.9:

    $("#navigation li ul").each(function(){
        var that = this;
        $(this).hide().prev().click(function(e) { 
            e.preventDefault();
            $(that).toggle();
        });
    });
    

    Though this would have worked just as well in previous versions too.

    Update: here's an even better way:

    $("#navigation li ul").hide().prev().click(function(e){
        e.preventDefault();
        $(this).next().toggle();
    });
    

    jsfiddle