javascript dropdown

Question

Je ne suis pas sûr de ce qui me manque ici. c'est le code que je l'ai placé:

 <script type="text/javascript"> 
    $(function(){ 
     $(".category_list").hide(); return false; 
     $("#sol-surface").click(function() { 
      $(this).next().toggle(); 
      return false; 
     }); 
     $("#nat-stone").click(function() { 
      $(this).next().toggle(); 
      return false; 
     }); 
     $("#man-surface").click(function() { 
      $(this).next().toggle(); 
      return false; 
     }); 
    }); 

</script> 

et alors qu'il se cache le sous-menu, il est pas non plus à venir lorsque je clique sur l'élément - c'est ce qui arrive quand je regarde la source de la page:

<div class="cat_nav"> 
    <ul> 
     <li><a href="#" id="sol-surface">Solid Surface</a></li> 

     <li><a href="#" id="nat-stone">Natural Stone</a></li> 
     <li><a href="#" id="man-surface">Manufactured Surface</a></li> 
    </ul> 
    <div id="sub-nav"> 
    <ul class="category_list"> 
    <li><a href="http://www.metrostoneworks.com/products/?c=corian">Corian</a></li> 
</ul> 
    <ul class="category_list"> 

    <li><a href="http://www.metrostoneworks.com/products/?c=granite">Granite</a></li> 
    <li><a href="http://www.metrostoneworks.com/products/?c=silestone">Silestone</a></li> 
</ul> 
    <ul class="category_list"> 
    <li><a href="http://www.metrostoneworks.com/products/?c=zodiaq">Zodiaq</a></li> 
</ul> 
    </div> <!-- EO #sub-nav --> 
</div> <!-- EO .cat_nav --> 

et je ne sais pas pourquoi je ne peux pas le sous-menu ... merci

Answer 1

Pourquoi vous renvoie false immédiatement après avoir caché?

$(".category_list").hide(); return false; 

Ce retour sort de la fonction dans laquelle vous êtes et ne lie pas le reste des éléments.

De plus, votre HTML n'est pas ce qu'il devrait être pour que votre code fonctionne. Il devrait ressembler à ceci:

<div class="cat_nav"> 
    <ul> 
    <li><a href="#" id="sol-surface">Solid Surface</a> 
     <ul class="category_list"> 
     <li><a href="http://www.metrostoneworks.com/products/?c=corian">Corian</a></li> 
     </ul> 
    </li> 
    <li><a href="#" id="nat-stone">Natural Stone</a> 
     <ul class="category_list"> 
     <li><a href="http://www.metrostoneworks.com/products/?c=granite">Granite</a></li> 
     <li><a href="http://www.metrostoneworks.com/products/?c=silestone">Silestone</a></li> 
     </ul> 
    </li> 
    <li><a href="#" id="man-surface">Manufactured Surface</a> 
     <ul class="category_list"> 
     <li><a href="http://www.metrostoneworks.com/products/?c=zodiaq">Zodiaq</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

Une fois que votre HTML ressemble à ceci, vous pouvez remplacer:

$("#sol-surface").click(function() { 
      $(this).next().toggle(); 
      return false; 
    }); 
    $("#nat-stone").click(function() { 
      $(this).next().toggle(); 
      return false; 
    }); 
    $("#man-surface").click(function() { 
      $(this).next().toggle(); 
      return false; 
    }); 

Avec ceci:

$("div.cat_nav > ul li a").click(function() { 
      $(this).next().toggle(); 
      return false; 
    }); 

Answer 2

Parce que $(this).next() rendements non définis dans les trois cas . Vos liens n'ont pas de frères et soeurs.