0

I have the following structure of categories in my Opencart

<ul>
<li class="bu">
    <a href="http://brandoutlet.lv/index.php?route=product/category&amp;path=205" class="active">PARENT 1</a>
        <ul>
            <li>
                <a href="/index.php?route=product/category&amp;path=205_66"> CHILD 1</a>
                <ul>
                    <li><a href="index.php?route=product/category&amp;path=205_66_230"> - GRANDCHILD 1</a></li>
                    <li><a href="/index.php?route=product/category&amp;path=205_66_229"> - GRANDCHILD 2</a></li>
                    <li><a href="/index.php?route=product/category&amp;path=205_66_228"> - GRANDCHILD 3</a></li>
                </ul>
            </li>
            <li>
                <a href="/index.php?route=product/category&amp;path=205_67" class="active"> CHILD 2</a>
                <ul>
                    <li><a href="/index.php?route=product/category&amp;path=205_67_231"> - GRANDCHILD 1</a></li>
                    <li><a href="/index.php?route=product/category&amp;path=205_67_217"> - GRANDCHILD 2</a></li>
                    <li><a href="/index.php?route=product/category&amp;path=205_67_216"> - GRANDCHILD 3</a></li>
                    <li><a href="/index.php?route=product/category&amp;path=205_67_215"> - GRANDCHILD 4</a></li>
                </ul>
            </li>
        </ul>
</li>
<li class="bu">
    <a href="/index.php?route=product/category&amp;path=206"> PARENT 2</a>
//....ETC

How can I give Parent, Child and Grandchild different styling (color, weight, decoration)?

I was trying to make it work with JS searching for UL and applying class depending on position, but result is messy and incorrect..

Any ideas? Thanks!

The view file:

<ul>
    <?php foreach ($categories as $category) { ?>
    <?php if($category['children']) { ?>
        <li class="bu">
        <?php } else { ?>
        <li class="onit" >
        <?php } ?>
      <?php if ($category['category_id'] == $category_id) { ?>
      <a href="<?php echo $category['href']; ?>" class="active" ><?php echo $category['name']; ?></a>
      <?php } else { ?>
      <a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
      <?php } ?>
      <?php if ($category['children']) { ?>
      <ul>
        <?php foreach ($category['children'] as $child) { ?>
        <li class="onit" >
          <?php if ($child['category_id'] == $child_id) { ?>
          <a href="<?php echo $child['href']; ?>" class="active">  <?php echo $child['name']; ?></a>
          <?php } else { ?>
          <a href="<?php echo $child['href']; ?>">  <?php echo $child['name']; ?></a>
          <?php } ?>
        </li>
        <?php } ?>
      </ul>
      <?php } ?>
    </li>
    <?php } ?>
  </ul>
4

2 回答 2

0

您可以搜索和修改生成此表单的 php 文件。比用一些 css 类完成代码。

已编辑问题的答案：
如果您观看 href，您可以看到路径部分在同一代中具有相同数量的变量：

  • 父：路径=205
  • 孩子：路径=205_66
  • 孙子：路径=205_66_230

您可以获得这部分文本，并根据变量编号进行格式化。所以条件看起来像这样：

if(count(explode("_",strstr($child['href'],"path=")))==1)
   //Do the formating for parent.
  • 使用strstr()在部分之前删除path=。如果之前没有 '_' 字符，您可以省略它path=。
  • 使用explode()，您可以将字符串拆分为带有“_”字符的数组。
  • 比count()将计算数组的元素。

比较父母为 1，孩子为 2，孙子为 3。
否则我假设通过重写代码应该有更好的方法来实现这个目标。

于 2012-11-19T14:02:10.490 回答
0

I think you could maybe do it like this:

ul li {
 color:red;
}

ul li > ul li {
 color:blue;
}

ul li > ul li > ul li {
 color:green;
}
于 2012-11-19T15:18:00.530 回答