javascript - 构建当前的以类别为中心的导航

Question

我想为这个网站开发一个类似的导航:http://www.enjukuracing.com/categories/nissan

他们在 BigCommerce 平台上，我喜欢他们侧边导航显示类别和子类别的方式。本质上，我想知道显示此类内容的逻辑以及我需要在 BigCommerce 中执行此操作的哪些组件。

我想指出关于这个示例的一些不符合我们要求的地方。

• 该站点似乎存在同一链接的多个位置(如果您查看源代码，一个链接出现了 4 次——我的网站正试图避免这种情况，因为超过 800 个内部链接以及生成导航的网站加载时间)
• 每个子类别都是为所有类别和不同的菜单外观生成的——这就是它们分别出现 4 次的原因

所以最终，我们想要一个可以做这些事情的导航:

• 知道我们目前属于什么类别
• 显示当前类别的父类别
• 显示当前类别的兄弟类别
• 显示当前类别的子类别/子类别
• 点击后向下展开以显示子类别

我知道类别 API 可以告诉我类别的层次结构，但我觉得在我网站的每个页面上对 PHP 文件进行 AJAX 调用可能违反直觉，无法提高我的网站速度。是否有任何我可以使用 JS 访问并可以在页面级别操作的简单对象？

Answer 1

我刚刚使用 JS 做了类似的事情来确定要显示/隐藏哪些类别以及打开/关闭哪些类别。首先，在侧边栏中包含类别树并将其隐藏。

    function formatCustomSideBar(){
        var cats = [];
        $("ul.breadcrumbs > li").each(function(){
            if($(this).hasClass("is-active")){
                var name = $(this).find("span").text();
                cats.push(name);
            } else {
                var name = $(this).find("a").text();
                cats.push(name);
            }
        });
        console.log(cats);

        $(".custom-nav li a").each(function(){
            var subCat = $(this).text();
            if( $.inArray(subCat, cats) !== -1 ){
                $(this).parent("li").addClass("active-category");
            }
        });
    };
    formatCustomSideBar();

接下来，将所有面包屑值添加到一个数组中，因为面包屑总是告诉我们我们在网站上的位置。然后循环导航树，添加一个类active-category如果它存在于面包屑数组中，则添加到列表项。使用 active-category类和 CSS，您可以为该功能设置样式。

要添加切换功能，我会在我的函数末尾添加额外的几行，以使用 active-category 循环列表项。类，并检查他们是否有 child <ul>找出他们是否有子类别，并添加一个类 has-children从那里开始。

希望这对您有所帮助。