Question

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

他们在BigCommerce平台上，我喜欢他们的侧面导航显示类别和子类别。基本上我想知道显示这样的东西的逻辑以及我需要做的BigCommerce中的哪些组件。

我想指出一些关于这个例子的事情并不理想我们想要的东西。

此网站似乎遭受同一链接的多个位置（如果您看看源代码，一个链接出现4次 - 我的网站试图避免这种情况，因为超过800个内部链接，还因为网站加载时间生成导航）
为所有类别和不同的菜单外观生成每个子类别 - 这就是为什么它们每次出现4次

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

了解我们目前所属的类别
显示导致当前类别的父类别
将同级类别显示为当前类别
将子类别/子类别显示为当前类别
点击以向下展开以显示子类别

我知道Category 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类循环列表项，并检查他们是否有孩子<ul>来查找如果他们有子类别，并从那里添加类似has-children的类。

希望这有帮助。

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

1 个答案: