5

昨天，我确实花了几个小时试图做到这一点，并在这里找到了一个很好的答案：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

4

1 回答 1

2

在 Bigcommerce 中，侧边导航和顶部菜单导航通常由同一个 ID 选择器调用。

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

看起来您可能不再在此站点上工作，但希望对某人有所帮助。

于 2016-02-15T06:47:30.453 回答