可折叠菜单javascript问题

Collapsible menu javascript problem

本文关键字：问题 javascript 菜单 可折叠      更新时间：2023-09-26

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

我最终得到了这个解决方案。由于这是一个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解决这个问题，但我实现了我想要的。

相关文章：