我想开发一个类似的导航到这个网站:http://www.enjukuracing.com/categories/nissan
他们在BigCommerce平台上，我喜欢他们的侧导航显示类别和子类别的方式。从本质上讲，我想知道显示这样的内容的逻辑，以及我需要在BigCommerce中使用哪些组件来完成此操作。
我想指出一些关于这个例子的事情，这些事情不是我们想要的理想。
- 这个网站似乎受到同一链接的多个位置的影响看看来源，一个链接出现了4次——我的网站试图避免这种情况，因为有800多个内部链接，也因为网站加载时间来生成导航)
- 每个子类别是为所有类别和不同的菜单外观生成的-这就是为什么它们每个出现4次
- 了解我们目前处于哪个类别
- 显示当前类别前的父类别
- 显示同级类别到当前类别
- 显示子类别/子类别到当前类别
- 单击后向下展开以显示子类别
我知道类别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();
接下来，将所有breadcrumb值添加到一个数组中，因为breadcrumb总是告诉我们我们在站点上的位置。然后循环导航树，并在列表项中添加active-category类(如果它出现在breadcrumb数组中)。使用active-category类和CSS，您可以设置该功能的样式。
要添加切换功能，我将在函数末尾添加额外的几行，以循环列出active-category类的项目，并检查它们是否有子<ul>以找出它们是否有子类别，并从那里添加像has-children这样的类。