Question

我昨天花了好几个小时试图这样做，并在这里找到了一个很好的答案：stackoverflow.com/questions/11056808/big-commerce-hover-menu但我似乎无法弄清楚如何应用它我的商店。基本上，Bigcommerce使用一段称为“面板”的代码来显示类别。此面板用于顶部类别菜单和侧面菜单。现在，BC扩展所有类别如下：

父类别


儿童类别


下一个孩子

下一个孩子


儿童类别


下一个孩子

下一个孩子

我想知道如何保持顶部菜单看起来一样，但如何更改侧面菜单以显示如下：

父类别


儿童类别

儿童类别

点击：

父类别


儿童类别


下一个孩子

下一个孩子


儿童类别


父类别


儿童类别

儿童类别


下一个孩子

下一个孩子

分别

侧面类别菜单的HTML如下所示：

<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>

使用以下CSS样式：

.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＆gt; #SideCategoryList。

看起来你可能不再在这个网站上工作，但希望能帮到某个人。

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

父类别

父类别

父类别

父类别

1 个答案: