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

Question

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

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

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

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

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

了解我们目前所在的类别
显示当前类别的父类别
显示当前类别的兄弟类别
显示 subcategory/children 个类别到当前类别
点击后向下展开以显示子类别

我知道类别 API 可以告诉我类别的层次结构，但我觉得 AJAX 调用我网站每个页面上的 PHP 文件可能会产生反作用- 使我的网站更快的直观。是否有任何我可以使用 JS 访问并可以在页面级别操作的简单对象？

Answer 1

我刚刚使用 JS 做了类似的事情来确定哪些类别 show/hide 以及哪些类别 open/closed。首先，在侧边栏中包含类别树并将其隐藏。

    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();

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

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

希望对您有所帮助。

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

Building a Current Category-Focused Navigation

javascript

php

jquery

bigcommerce