javascript下拉菜单答案

【问题标题】：javascript dropdownjavascript下拉菜单
【发布时间】：2009-03-16 12:55:40
【问题描述】：

我不确定我在这里缺少什么。这是我放置的代码：

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

我不知道为什么我无法进入子菜单...谢谢

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

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

那个 return 退出了你所在的函数，而不是绑定其余的元素。

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

【讨论】：

【解决方案2】：

因为$(this).next() 在所有三种情况下都返回 undefined。您的链接没有兄弟姐妹。

【讨论】：