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

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

javascript php jquery

Javascript 构建当前以类别为中心的导航,javascript,php,jquery,bigcommerce,Javascript,Php,Jquery,Bigcommerce,我想开发一个类似于此网站的导航：他们在BigCommerce平台上，我喜欢他们的侧导航显示类别和子类别的方式。本质上，我想知道这样显示的逻辑，以及我需要在BigCommerce中使用哪些组件来实现这一点我想指出关于这个例子的一些事情，它们并不符合我们想要的此站点似乎受到同一链接的多个位置的影响（如果您看看源代码，一个链接出现了4次-我的网站正试图避免出现这种情况，因为有超过800个内部链接，还因为生成导航的网站加载时间）每个子类别都是为所有类别和不同的菜单外观生成的，这就是为什么它们

我想开发一个类似于此网站的导航：

他们在BigCommerce平台上，我喜欢他们的侧导航显示类别和子类别的方式。本质上，我想知道这样显示的逻辑，以及我需要在BigCommerce中使用哪些组件来实现这一点

我想指出关于这个例子的一些事情，它们并不符合我们想要的

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

因此，最终，我们需要一个能够实现以下功能的导航：

知道我们目前属于哪一类
显示当前类别之前的父类别
显示当前类别的同级类别
将子类别/子类别显示到当前类别
单击后向下展开以显示子类别

我知道Category API可以告诉我类别的层次结构，但我觉得在我的网站的每个页面上对PHP文件进行AJAX调用可能会违反直觉，从而使我的网站更加快速。有什么简单的对象可以通过JS访问，并且可以在页面级别进行操作吗？

我只是用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();

接下来，将所有面包屑值添加到一个数组中，因为面包屑总是告诉我们在站点上的位置。然后循环导航树，并将一类

活动类别

添加到列表项（如果它存在于面包屑数组中）。使用

活动类别

类和CSS，可以设置功能的样式

要添加切换功能，我将在函数末尾添加几行，以循环使用

活动类别

类的列表项，并检查它们是否有子类

，以确定它们是否有子类，然后从中添加一个类，如

有子类

希望这能有所帮助。

我只是使用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();