Jquery ul Sous-menu slidetoggle issue

Question

Je construis un magasin en utilisant oscommerce et ai un menu utilisant un addon qui affiche une liste non ordonnée pour les catégories. La liste UL affiche comme si ...

<ul id='suckertree1'><li><a href='index.php?cPath=21'>Summer</a> 
     <ul> 
      <li> 
      <a href='index.php?cPath=21_23'>Bikes</a> 
      <ul> 
      <li><a href='index.php?cPath=21_23_28'>E-Bikes</a></li> 
      <li><a href='index.php?cPath=21_23_27'>Mountainroad</a></li> 
      <li><a href='index.php?cPath=21_23_26'>Road Bikes&nbsp;(1)</a></li> 
     </ul> 
    </li> 
    <li><a href='index.php?cPath=21_24'>Clothing</a> 
    <ul> 
     <li><a href='index.php?cPath=21_23_28'>Gloves</a></li> 
     <li><a href='index.php?cPath=21_23_27'>Shoes</a></li> 
     <li><a href='index.php?cPath=21_23_26'>Protection</a></li> 
    </ul> 

</li> 
    </ul> 
    </li> 
    <li> 
    <a href='index.php?cPath=22'>Winter</a> 
    </li> 
    </ul> 

J'utilise jquery pour cacher une partie du menu. Lorsque vous cliquez sur vélos - il affiche ensuite le sous-menu de cela. Le problème que j'ai est que les liens du sous-menu ne lient pas, ils ferment à nouveau le menu ..

Voici mon (mauvais) Code jQuery

$(document).ready(function() { 
    $("ul#suckertree1 li ul li ul").hide(); 
    $("ul#suckertree1 li ul li a").click(function(e) { 
     e.preventDefault(); 
     $("ul#suckertree1 li ul li ul").slideToggle(); 
    }); 
}); 

En raison des limites avec ce menu, je suis impossible d'attribuer des classes ou des ID au menu autre que le # suckertree1 déjà en place. Comment puis-je empêcher preventDefault() d'effectuer les points de sous-menu? et aussi, en cliquant sur un élément pour seulement basculer le sous-menu ci-dessous?

Merci

James

Answer 1

Au lieu de cela:

$("ul#suckertree1 li ul li ul").slideToggle(); 

Trouver le <ul> relativement, car il est à côté de la <a> vous avez cliqué sur c'est assez facile à obtenir à l'aide .siblings() ou .next(), comme celui-ci :

$(this).siblings('ul').slideToggle(); 

Il avait ressembler à ceci:

$(function() { 
    $("ul#suckertree1 li ul li ul").hide(); 
    $("ul#suckertree1 li ul li:has(ul) > a").click(function(e) { 
    $(this).siblings('ul').slideToggle(); 
    e.preventDefault(); 
    }); 
});​ 

You can give it a try here

Cette version corrige également les liens du sous-menu de travail en utilisant :has() et the child selector (>). Ce que nous faisons lie seulement ce gestionnaire aux liens qui sont dans un <li> que aussi contiennent un élément <ul>. Si elle n'en a pas (pas de sous-menu) ce code ne fonctionne même pas pour cette ancre, et il continue à suivre comme href comme d'habitude.