Уведомления

Группа в Telegram: @pythonsu

#1 Авг. 27, 2019 10:19:19

Allen
Зарегистрирован: 2019-08-27
Сообщения: 1
Репутация: +  0  -
Профиль   Отправить e-mail  

Аккордион при помощи 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
 function Util () {};
Util.hasClass = function(el, className) {
	if (el.classList) return el.classList.contains(className);
	else return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
};
Util.addClass = function(el, className) {
	var classList = className.split(' ');
 	if (el.classList) el.classList.add(classList[0]);
 	else if (!Util.hasClass(el, classList[0])) el.className += " " + classList[0];
 	if (classList.length > 1) Util.addClass(el, classList.slice(1).join(' '));
};
Util.removeClass = function(el, className) {
	var classList = className.split(' ');
	if (el.classList) el.classList.remove(classList[0]);
	else if(Util.hasClass(el, classList[0])) {
		var reg = new RegExp('(\\s|^)' + classList[0] + '(\\s|$)');
		el.className=el.className.replace(reg, ' ');
	}
	if (classList.length > 1) Util.removeClass(el, classList.slice(1).join(' '));
};
Util.toggleClass = function(el, className, bool) {
	if(bool) Util.addClass(el, className);
	else Util.removeClass(el, className);
};
Util.setAttributes = function(el, attrs) {
  for(var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
};
Util.getChildrenByClassName = function(el, className) {
  var children = el.children,
    childrenByClass = [];
  for (var i = 0; i < el.children.length; i++) {
    if (Util.hasClass(el.children[i], className)) childrenByClass.push(el.children[i]);
  }
  return childrenByClass;
};
Util.setHeight = function(start, to, element, duration, cb) {
	var change = to - start,
	    currentTime = null;
  var animateHeight = function(timestamp){  
    if (!currentTime) currentTime = timestamp;         
    var progress = timestamp - currentTime;
    var val = parseInt((progress/duration)*change + start);
    element.setAttribute("style", "height:"+val+"px;");
    if(progress < duration) {
        window.requestAnimationFrame(animateHeight);
    } else {
    	cb();
    }
  };
  element.setAttribute("style", "height:"+start+"px;");
  window.requestAnimationFrame(animateHeight);
};
Util.scrollTo = function(final, duration, cb) {
  var start = window.scrollY || document.documentElement.scrollTop,
      currentTime = null;
      
  var animateScroll = function(timestamp){
  	if (!currentTime) currentTime = timestamp;        
    var progress = timestamp - currentTime;
    if(progress > duration) progress = duration;
    var val = Math.easeInOutQuad(progress, start, final-start, duration);
    window.scrollTo(0, val);
    if(progress < duration) {
        window.requestAnimationFrame(animateScroll);
    } else {
      cb && cb();
    }
  };
  window.requestAnimationFrame(animateScroll);
};
Util.moveFocus = function (element) {
  if( !element ) element = document.getElementsByTagName("body")[0];
  element.focus();
  if (document.activeElement !== element) {
    element.setAttribute('tabindex','-1');
    element.focus();
  }
};
Util.getIndexInArray = function(array, el) {
  return Array.prototype.indexOf.call(array, el);
};
Util.cssSupports = function(property, value) {
  if('CSS' in window) {
    return CSS.supports(property, value);
  } else {
    var jsProperty = property.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase();});
    return jsProperty in document.body.style;
  }
};
if (!Element.prototype.matches) {
	Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
}
if (!Element.prototype.closest) {
	Element.prototype.closest = function(s) {
		var el = this;
		if (!document.documentElement.contains(el)) return null;
		do {
			if (el.matches(s)) return el;
			el = el.parentElement || el.parentNode;
		} while (el !== null && el.nodeType === 1); 
		return null;
	};
}
if ( typeof window.CustomEvent !== "function" ) {
  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   }
  CustomEvent.prototype = window.Event.prototype;
  window.CustomEvent = CustomEvent;
}
Math.easeInOutQuad = function (t, b, c, d) {
	t /= d/2;
	if (t < 1) return c/2*t*t + b;
	t--;
	return -c/2 * (t*(t-2) - 1) + b;
};

//main.js
 (function() {
  var accordionsMenu = document.getElementsByClassName('cd-accordion--animated');
	if( accordionsMenu.length > 0 && window.requestAnimationFrame) {
		for(var i = 0; i < accordionsMenu.length; i++) {(function(i){
			accordionsMenu[i].addEventListener('change', function(event){
				animateAccordion(event.target);
			});
		})(i);}
		function animateAccordion(input) {
			var bool = input.checked,
				dropdown =  input.parentNode.getElementsByClassName('cd-accordion__sub')[0];
			console.log(input);
			Util.addClass(dropdown, 'cd-accordion__sub--is-visible');
			var initHeight = !bool ? dropdown.offsetHeight: 0,
				finalHeight = !bool ? 0 : dropdown.offsetHeight;
			Util.setHeight(initHeight, finalHeight, dropdown, 200, function(){
				Util.removeClass(dropdown, 'cd-accordion__sub--is-visible');
				dropdown.removeAttribute('style');
			});
		}
	}
}());

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

Отредактировано Allen (Авг. 27, 2019 10:20:30)

Прикреплённый файлы:
attachment Скриншот от 2019-08-27 10-17-30.png (35,3 KБ)

Офлайн

#2 Авг. 27, 2019 10:27:24

AD0DE412
Зарегистрирован: 2019-05-12
Сообщения: 1130
Репутация: +  44  -
Профиль   Отправить e-mail  

Аккордион при помощи jinja2

вы наверное ошиблись ту так то http://python.su/forum попробуйте еще раз https://javascript.ru/forum/
зы ошибка таки моя python https://ru.wikipedia.org/wiki/Jinja



1. пжлст, форматируйте код, это в панели создания сообщений, выделите код и нажмите что то вроде
2. чтобы вставить изображение залейте его куда нибудь (например), нажмите и вставьте ссылку на его url
…
есчщо

Отредактировано AD0DE412 (Авг. 27, 2019 11:01:26)

Офлайн

Board footer

Модераторировать

Powered by DjangoBB

Lo-Fi Version