Bigcommerce - 如何在单击父类别时显示侧子类别？

Question

I literally spent hours trying to do this, yesterday, and found one great answer here: stackoverflow.com/questions/11056808/big-commerce-hover-menu but I can't seem to figure out how to apply it to my store. Basically, Bigcommerce uses a snippet of code called a 'panel' to display categories. This panel is used in both the top category menu and the side menu. Right now, BC expands all categories as follows:

Parent Category

Child Category

Next Child

Next Child

Child Category

Next Child

Next Child

I'd like to know how to keep the top menu looking the same, but how to change the side menu to display as follows:

Parent Category

Child Category

Child Category

And on click:

Parent Category

Child Category

Next Child

Next Child

Child Category

Parent Category

Child Category

Child Category

Next Child

Next Child

Respectively.

The HTML for the side category menu looks like this:

<div class="CategoryList" id="SideCategoryList">
<div class="BlockContent">
    <div class="SideCategoryListFlyout">
        <ul class="sf-menu sf-horizontal sf-js-enabled">
            <li class=""><a href="#" class="sf-with-ul">Parent Category</a>
               <ul style="display: none; visibility: hidden;">
                  <li><a href="#">Child Category</a>
                      <ul style="display: none; visibility: hidden;">
                         <li><a href="#">Next Child</a></li>
                         <li><a href="#">Next Child</a></li>
                         <li><a href="#">Next Child</a></li>
                      </ul>
                  </li>
                  <li><a href="#">Child Category</a>
                      <ul style="display: none; visibility: hidden;">
                         <li><a href="#">Next Child</a></li>
                         <li><a href="#">Next Child</a></li>
                         <li><a href="#">Next Child</a></li>
                      </ul>
                  </li>
               </ul>
            </li>
        </ul>
    </div>
</div>
</div>

With the following CSS styles:

.Left #SideCategoryList {
    display: block;
}
.Left #SideCategoryList ul ul {
    color: #5a5353;
}
.Left #SideCategoryList .BlockContent,
.Left .slist .BlockContent {
    color: #5a5353;
}
.Left #SideCategoryList li a,
.Left .slist li a,
.Left .afterSideShopByBrand a, .Left #GiftCertificatesMenu li a, .Left #SideAccountMenu li a {
    color: #5a5353;
}
.Left #SideCategoryList li a:hover,
.Left .slist li a:hover,
.Left .afterSideShopByBrand a:hover, .Left #GiftCertificatesMenu li a:hover, .Left #SideAccountMenu li a:hover {
    color: #5a5353;
}
.Left #SideCategoryList li li a,
.Left .slist li li a {
color: #5A5353;

}
.Left #SideCategoryList li li a:hover,
.Left .slist li li a:hover {
    color: #aca9a9;
}

我希望我能涵盖所有内容,但如果您需要更多说明,请告诉我.请记住,一些代码是由系统自动生成的(我怀疑jquery就像使用检查工具一样,将鼠标悬停在链接上会自动更改它的类).这是网站链接:

http://bit.ly/1aHKTke

Answer 1

在Bigcommerce中，侧面导航和顶部菜单导航通常由相同的ID选择器调用。

为了使该 javascript 仅在一个区域中工作，您需要使用更具体的选择器，例如 #SidePanel > #SideCategoryList。

您可能不再在该网站上工作，但希望对某人有所帮助。