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

为什么隐藏后立即返回 false？

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

该返回正在退出您所在的函数，并且不会绑定(bind)其余元素。

此外，您的 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;
    });