javascript dropdown

Question

私はここで何が欠けているのか分かりません。これは私が置かれているコードです：

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

、それがサブメニューを隠している間、また、私はアイテムをクリックしたときまで来ていない - これは私がページのソースを見ると、最大来るものです：

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

と私はサブメニューに得ることができない理由はわからない...おかげ

Answer 1

は、なぜあなたは隠れた直後にfalseを返すされていますか？

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

このリターンは、現在の機能から抜け出し、残りの要素をバインドしません。

また、HTMLはコードを動作させるために必要なものではありません。それは次のようになります。$(this).next()リターンはすべての3つのケースでは未定義なので

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

Answer 2

：これにより

$("#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; 
    }); 

：あなたのHTMLは次のようになります

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

たら、あなたはこれを置き換えることができます。あなたのリンクには兄弟はありません。