0

Есть код php на opencart: opencart.com/catalog/view/theme/default/template/extension/module/category.tpl

<div class="leftSideBar">
<?php foreach ($categories as $category) { ?>
<?php if ($category['category_id'] == $category_id) { ?>

<?php if ($category['children']) { ?>

<?php foreach ($category['children'] as $child) { ?>
<div class="container leftSideBarPadding">
    <a href="<?php echo $child['href']; ?>" >
        <span class="boldLetter"><?php echo $child['name']; ?></span>
        <i class="fa fa-angle-down" aria-hidden="true"></i>
    </a>
</div>
<div class="leftSideBarLine"></div>

<?php if(isset($child['children_lv3']) && count($child['children_lv3'])>0){ ?>
<?php foreach ($child['children_lv3'] as $child_lv3) { ?>
<div class="container leftSideBarPadding">
    <a href="<?php echo $child_lv3['href']; ?>" >
        <span><?php echo $child_lv3['name']; ?></span>
    </a>
</div>
<div class="leftSideBarLine"></div>
<?php  } ?>
<?php } ?>
<?php } ?>

<?php } ?>
<?php } else { ?>
<a href="<?php echo $category['href']; ?>"  ><?php echo $category['name']; ?></a>
<?php } ?>
<?php } ?>
</div>

данный код выводит подкатегории категории и подподкатегории подкатегорий! Как с помощью js или с помощью css сделать чтоб при нажатии на подкатегорию - выпадали подподкатегории? у меня оно монолитом... Оно должно выпускать список 3 уровня при нажатии, как показано на картинке 1 (только нажал на одну подкатегорию открылся список, нажал на вторую - открылся второй список, нажал еще раз на подкатегорию - закрылся и т.д...)

введите сюда описание изображения

2
  • 1
    зачем же js? когда есть практически идеальный bootstrap toggle? тем более, что бутстрап в опенкарте по умолчанию.
    – Kirill
    19 мая 2017 в 12:01
  • согласен, это было одно из решений сделать это, но не подошло..... 19 мая 2017 в 12:37

1 ответ 1

0
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="leftSideBar col-md-3 ">
<div id="wrap">
        <div id="center">
            <div class="box">
                <h3 class="boldLetter leftSideBarCategory">Список №1
                <span class="expand">v</span>
              </h3>                  
                <ul class="leftSideBarUl">
                  <div class="leftSideBarLine"></div>
                    <li class="leftSideBarLi"><a>Пункт №1</a></li>
                 <div class="leftSideBarLine"></div>
                    <li class="leftSideBarLi"><a>Пункт №1</a></li>
                  <div class="leftSideBarLine"></div>
                    <li class="leftSideBarLi"><a>Пункт №1</a></li>
                </ul>
              <div class="leftSideBarLine"></div>
                <h3 class="boldLetter leftSideBarCategory">Список №1
                <span class="expand">v</span>
              </h3>
                 <ul class="leftSideBarUl">
                  <div class="leftSideBarLine"></div>
                    <li class="leftSideBarLi"><a>Пункт №1</a></li>
                 <div class="leftSideBarLine"></div>
                    <li class="leftSideBarLi"><a>Пункт №1</a></li>
                  <div class="leftSideBarLine"></div>
                    <li class="leftSideBarLi"><a>Пункт №1</a></li>
                </ul>
            </div>
        </div>
$(document).ready(function(){
    $("ul").hide();
    $(".box h3").click(function(){
        $(this).next().slideToggle();
        var text = $("span",this).text();
        $("span",this).text(text != "^" ? "^" : "v")
    });
});
</div> 

</body>

CSS файл:

.leftSideBar {
 border-radius: 20px 20px 20px 20px;
 background-color: #FFFFFF;
 width: 200px;
 border: 2px solid #CCCCCC;
}

.leftSideBarLine { border-bottom: 2px solid #CCCCCC; }

.leftSideBarUl {
  padding: 0px;
    margin:0;
  overflow: hidden;
    }

.leftSideBarLi {
    font-size: 13px;
    list-style-type: none;
    list-style-position: inside;
  padding: 10px;
    }

.leftSideBarCategory{
    padding: 10px;
    color: #6C6C6C;
    font-size: 13px;
    font-weight: normal;
    margin:0;
    cursor: pointer;
    }

.expand {
    float: right;
    cursor: pointer;
}
.boldLetter {
font-weight: 600;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.