Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.08.2019, 10:39
Новичок на форуме
Отправить личное сообщение для Allen Посмотреть профиль Найти все сообщения от Allen
 
Регистрация: 27.08.2019
Сообщений: 1

Аккордион при помощи jinja2
Есть json

Код:
     result = [
        {"name": "All",       "id": 1, "level": 1},
        {"name": "Man",       "id": 2, "level": 2},
        {"name": "Phil",      "id": 3, "level": 3},
        {"name": "Tim",       "id": 4, "level": 3},
        {"name": "Tim Smith", "id": 5, "level": 4},
        {"name": "Woman",     "id": 6, "level": 2},
        {"name": "Dogs",      "id": 7, "level": 2},
        {"name": "Colors",    "id": 8, "level": 1},
        {"name": "Blue",      "id": 9, "level": 2},
        {"name": "Dark Blue", "id": 10, "level": 3},
    ]

length = len(result)
Есть шаблон
<body>
<section class="container max-width-sm">
    <ul class="cd-accordion cd-accordion--animated margin-top-lg margin-bottom-lg">
        <li class="cd-accordion__item cd-accordion__item--has-children">
            {% for elm in range(length) %}
            {% set first_idx = 'first' + loop.index|string %}
            {% set sec_idx = 'second' + loop.index|string %}
            {% set third_idx = 'third' + loop.index|string %}
            {% set fourth_idx = 'fourth' + loop.index|string %}
            {% if accordion[elm]['level'] == 1 %}
            <input class="cd-accordion__input" type="checkbox" id="{{first_idx}}">
            <label class="cd-accordion__label cd-accordion__label--icon-folder" for="{{first_idx}}">
                <span>{{ accordion[elm]['name'] }}</span>
            </label>
            {% endif %}
            <ul class="cd-accordion__sub cd-accordion__sub--l1">
                <li class="cd-accordion__item cd-accordion__item--has-children">
                    {% if accordion[elm]['level'] == 2 %}
                    <input class="cd-accordion__input" type="checkbox" name="{{sec_idx}}" id="{{sec_idx}}">
                    <label class="cd-accordion__label cd-accordion__label--icon-folder" for="{{sec_idx}}"><span>{{ accordion[elm]['name'] }}</span></label>
                    {% endif %}
                    <ul class="cd-accordion__sub cd-accordion__sub--l2">
                        <li class="cd-accordion__item cd-accordion__item--has-children">
                            {% if accordion[elm]['level'] == 3%}
                            <input class="cd-accordion__input" type="checkbox" name="{{third_idx}}" id="{{third_idx}}">
                            <label class="cd-accordion__label cd-accordion__label--icon-folder" for="{{third_idx}}">
                                <span>{{ accordion[elm]['name'] }}</span></label>
                            {% endif %}
                        </li>
                    </ul>
                </li>
            </ul>
            {%endfor%}
        </li>
    </ul>
</section>
<script src="./static/assets/js/util.js"></script>
<script src="./static/assets/js/main.js"></script>


util.js и main.js во вложении

//style.css

Код:
.cd-accordion {
    background: hsl(218, 7%, 32%);
    background: var(--cd-color-1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .1), 0 16px 48px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .1);
    box-shadow: var(--shadow-lg)
}
.cd-accordion--animated .cd-accordion__label::before {
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s
}
.cd-accordion__sub {
    display: none;
    overflow: hidden
}
.cd-accordion__sub--is-visible {
    display: block
}
.cd-accordion__item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
.cd-accordion__input {
    position: absolute;
    opacity: 0
}
.cd-accordion__label {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.75em 1.25em;
    padding: var(--space-sm) var(--space-md);
    background: hsl(218, 7%, 32%);
    background: var(--cd-color-1);
    --color-shadow: lightness(hsl(218, 7%, 32%), 1.2);--color-shadow: lightness(var(--cd-color-1), 1.2);box-shadow: inset 0 -1px lightness(hsl(218, 7%, 32%), 1.2);
    box-shadow: inset 0 -1px var(--color-shadow);
    color: hsl(0, 0%, 100%);
    color: var(--color-white)
}
.cd-accordion__label span {
    -ms-flex-order: 3;
    order: 3
}
.cd-accordion__label:hover {
    background: hsl(218, 7%, 35.2%);
    background: hsl(var(--cd-color-1-h), var(--cd-color-1-s), calc(var(--cd-color-1-l)*1.1))
}
.cd-accordion__label::after,.cd-accordion__label--icon-folder::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-image: url("../img/cd-icons.svg");
    background-repeat: no-repeat;
    margin-right: 0.25em;
    margin-right: var(--space-xxxs)
}
.cd-accordion__label--icon-folder::before {
    -ms-flex-order: 1;
    order: 1
}
.cd-accordion__label::after {
    -ms-flex-order: 2;
    order: 2
}
.cd-accordion__label--icon-folder::before {
    background-position: 0 0;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg)
}
.cd-accordion__label--icon-folder::after {
    background-position: -16px 0
}
.cd-accordion__label--icon-img::after {
    background-position: -48px 0
}
.cd-accordion__input:checked+.cd-accordion__label::before {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0)
}
.cd-accordion__input:checked+.cd-accordion__label::after {
    background-position: -32px 0
}
.cd-accordion__input:checked ~ .cd-accordion__sub {
    display: block
}
.cd-accordion__sub--l1 .cd-accordion__label {
    background: hsl(218, 7%, 20.8%);
    background: hsl(var(--cd-color-1-h), var(--cd-color-1-s), calc(var(--cd-color-1-l)*0.65));
    --color-shadow: lightness(hsl(218, 7%, 32%), 0.85); --color-shadow: lightness(var(--cd-color-1), 0.85); box-shadow: inset 0 -1px lightness(hsl(218, 7%, 32%), 0.85);
    box-shadow: inset 0 -1px var(--color-shadow);
    padding-left: calc(1.25em + 16px);
    padding-left: calc(var(--space-md) + 16px)
}
.cd-accordion__sub--l1 .cd-accordion__label:hover {
    background: hsl(218, 7%, 24%);
    background: hsl(var(--cd-color-1-h), var(--cd-color-1-s), calc(var(--cd-color-1-l)*0.75))
}
.cd-accordion__sub--l2 .cd-accordion__label {
    padding-left: calc(1.5em + 32px);
    padding-left: calc(var(--space-md) + var(--space-xxxs) + 32px)
}
.cd-accordion__sub--l3 .cd-accordion__label {
    padding-left: calc(1.5em + 48px);
    padding-left: calc(var(--space-md) + var(--space-xxxs) + 48px)
}
.label_new {
    background-image: url("../img/cd-icons.svg")
}

Проблема в том, что при раскрытии элементов с ‘level’=2 не отображаются элементы с ‘level’=3. (скрин)
Т.е. при клике на ‘Man’ должны были появиться ‘Phil’, ‘Tim’ и т.д.
Подскажите, что может быть не так.
Изображения:
Тип файла: jpg Скриншот от 2019-08-27 10-17-30.jpg (6.7 Кб, 3 просмотров)
Вложения:
Тип файла: zip js.zip (2.1 Кб, 0 просмотров)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
создание ссылки на гиперссылку при помощи переменной akuviktar Events/DOM/Window 2 05.01.2016 01:48
Работа с блоком комментариев vk.com при помощи javascript Q0001 Общие вопросы Javascript 5 25.10.2013 23:55
Загрузка файла при помощи .post abr_question jQuery 3 11.11.2011 09:29
выборка идентификатора при помощи jQuery из цикла PHP... xormax jQuery 4 27.04.2011 13:59
Подскажите как при помощи JS hta в трею свернуть kimboo Общие вопросы Javascript 4 11.07.2008 16:00