|
Аккордион при помощи 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’ и т.д.
Подскажите, что может быть не так. |
