将菜单树代码从jquery 1.7.1迁移到1.9.1

时间:2013-05-09 14:28:54

标签: javascript jquery menu submenu

我在迁移到1.9.1后使用jquery 1.7.1破解了js代码 您可以在http://jsfiddle.net/QK5Ld/2/上看到问题。

我使用的代码是:

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

我看到toggle()不再受支持,但我没有js专家,而且我已经失去了很多时间来尝试完成更新此js代码。

有什么想法吗? 提前谢谢。

尼古拉。

注意:使用的HTML是这样的:

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

1 个答案:

答案 0 :(得分:3)

您的代码在1.9中实际上变得更加清晰:

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

虽然在以前的版本中也可以这样做。

更新:这是一个更好的方法:

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

jsfiddle