выпадающий javascript

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

Почему вы возвращаете ложь сразу после сокрытия?

$(".category_list").hide(); 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>

Как только ваш HTML выглядит так, вы можете заменить это:

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

С этим:

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

Answer 2

Поскольку $(this).next() возвращает неопределенное значение во всех трех случаях. У ваших ссылок нет братьев и сестер.