javascript dropdown

Question

I am not sure what I am missing here. this is the code I have placed:

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

and while it is hiding the submenu, it is also not coming up when I click on the item - this is what comes up when I look at the page source:

    <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"&gt;Corian&lt;/a&gt;&lt;/li&gt;
</ul>
    <ul class="category_list">

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

and I am not sure why I cannot get to the submenu...thanks

Answer 1

Why are you returning false immediately after hiding?

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

That return is exiting out of the function you are in and not binding the rest of the elements.

Also, your HTML is not what it should be for your code to work. It should look like this:

<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"&gt;Corian&lt;/a&gt;&lt;/li&gt;
  </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"&gt;Granite&lt;/a&gt;&lt;/li&gt;
  <li><a href="http://www.metrostoneworks.com/products/?c=silestone"&gt;Silestone&lt;/a&gt;&lt;/li&gt;
  </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"&gt;Zodiaq&lt;/a&gt;&lt;/li&gt;
  </ul> 
 </li>
 </ul>
</div>

Once your HTML looks like this, you can replace this:

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

With this:

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

Answer 2

Because $(this).next() returns undefined in all three cases. Your links have no siblings.