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

Question

我有一个使用 jquery 1.7.1 的 js 代码在迁移到 1.9.1 后损坏了 您可以在 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>

Answer 1

您的代码实际上在 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