可折叠菜单javascript问题答案

【问题标题】：Collapsible menu javascript problem可折叠菜单javascript问题
【发布时间】：2011-09-21 03:57:37
【问题描述】：

我正在为可折叠的垂直菜单而苦苦挣扎。下面脚本的第一部分有效，因此上层 UL 显示其兄弟 LI，而其他 UL 隐藏其兄弟 LI。我的艰巨任务（至少对我而言）是使活动链接的父 UL 保持其兄弟 LI 可见。这是我在脚本下部尝试过的。我的 a 链接有时会得到一个尾随哈希 (#)，我想将其删除以便将 i 与活动 URL 进行比较。这是通过 trimHash(string) 函数完成的——该函数在对简单字符串进行测试时有效，但在此脚本中无效。有什么好的建议吗？

$(document).ready(function() {
        // Collapse everything but the first menu:
        $(".mainmenu > li > a").not(":first").find("+ ul").slideUp(1);
        // Expand or collapse:
        $(".mainmenu > li > a").click(function() {
            $(this).find("+ ul").slideToggle("fast");
        });

     $(".mainmenu li").each(function () {
        var li = $(this);
        var a = rtrimHash(li[0].firstChild);

        if (a.href == location.href) {
          $(this).find("+ ul").slideDown(1);
        }
    });

【问题讨论】：

标签： javascript menu folding

【解决方案1】：

我最终得到了这个解决方案。由于它是一个 Wordpress 网站，在逐步浏览菜单中的菜单项时，我可以通过将链接与活动帖子进行比较来检查每个链接是否处于活动状态，并将“当前”类插入这些菜单项：

echo '<li class="child';
if ( $menuPost->ID == $post->ID ) { echo ' current'; }

然后使用jQuery查找li“current”类的所有实例，并触发父ul的slideDown：

$(document).ready(function() {
    // Collapse everything:
    $("li.cat").find("+ ul").slideUp(1);

    // Collapse everything but the first menu:
    //$("li.cat").not(":first").find("+ ul").slideUp(1);

    // Expand or collapse:
    $("li.cat").click(function() {
        $(this).find("+ ul").slideToggle("fast");
    });
    $("li.current").parent().slideDown(1);  
});

对不起，我没有按照我的预期通过 javascript 解决这个问题，但我实现了我想要的。

【讨论】：