Question

我正在努力使用可折叠的垂直菜单。下面脚本的第一部分工作，以便上层UL显示其兄弟LI，而其他UL保持其兄弟LI隐藏。我的困难任务（至少对我来说）是让父级UL到活动链接保持其兄弟LI可见。这是我在脚本的下半部分尝试的。我的a-links有时会得到一个尾随哈希（＃），我想删除它以便将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);
        }
    });

Answer 1

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

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解决这个问题，但我实现了我想要的目标。

可折叠菜单javascript问题

1 个答案: