.panel {
padding: 0 15px;
transition: all 0.4s;
height: 0;
overflow: hidden;
}
.faq-item.active .panel {
padding: 15px 15px 20px;
}
.faq-item.active .cross {
transform: rotate(45deg);
}const containerSelector = '.faq-list';
const itemSelector = '.faq-item';
const headerSelector = '.accordion';
const contentSelector = '.panel';
const activeClass = 'active';
const toggle = item => item
?.closest(containerSelector)
?.querySelectorAll(itemSelector).forEach(n => {
const state = n === item && !n.classList.contains(activeClass);
const content = n.querySelector(contentSelector);
n.classList.toggle(activeClass, state);
content.style.height = `${state ? content.scrollHeight : 0}px`;
});document.addEventListener('click', e => {
toggle(e.target.closest(headerSelector)?.closest(itemSelector));
});
// или
document.querySelectorAll(headerSelector).forEach(n => {
n.addEventListener('click', toggle.bind(null, n.closest(itemSelector)));
});v-for индексы, которые затем проверяйте в v-if ячеек с rowspan'ами - рендерить их нужно только при нулевых значениях.objects[0]? Неужели в objects может быть только один элемент? Заверните то, что сейчас есть в ещё один template, в котором будет v-for по элементам objects.v-for.methods: {
rowspan: attr1 => attr1.reduce((acc, n) => acc + n.attr3.length + 1, 0),
},<template v-for="obj in objects">
<template v-for="{ road, attr1, TOTAL } in obj.data">
<template v-for="({ attr2, attr3, attr4 }, iAttr1) in attr1">
<tr v-for="(attr3Item, iAttr3) in attr3">
<td :rowspan="rowspan(attr1)" v-if="!iAttr1 && !iAttr3">{{ road }}</td>
<td :rowspan="attr3.length" v-if="!iAttr3">{{ attr2 }}</td>
<td>{{ attr3Item.road }}</td>
<td>{{ attr3Item.cargo }}</td>
<td>{{ attr3Item.amount }}</td>
<td>{{ attr3Item.wo_nds }}</td>
</tr>
<tr>
<td colspan="2">Итого {{ attr2 }}:</td>
<td>{{ attr4.cargo }}</td>
<td>{{ attr4.amount }}</td>
<td>{{ attr4.wo_nds }}</td>
</tr>
</template>
<tr>
<td colspan="3">Итого {{ road }}:</td>
<td>{{ TOTAL.cargo }}</td>
<td>{{ TOTAL.amount }}</td>
<td>{{ TOTAL.wo_nds }}</td>
</tr>
</template>
</template>когда нажимаю на другой блок, то цвет кнопки не становится прежним
transition: background 9999999s;:active вы, очевидно, не разобрались.:checked.
toggle не срабатывает при клике на элемент. Не присваивает классы и не убирает.
Клик происходит по label
<script src="script.js" />In HTML, the use of this syntax is restricted to void elements and foreign elements. If it is used for other elements, it is treated as a start tag.
HTML5 specifies that a <script> tag inserted with innerHTML should not execute.script вручную. Точнее - заменим тот, что есть, на новый с таким же src.div(v-html="сontent" ref="content")watch: {
content() {
this.$nextTick(() => {
const oldScript = this.$refs.content.querySelector('script');
const newScript = document.createElement('script');
newScript.src = oldScript.src;
oldScript.parentNode.replaceChild(newScript, oldScript);
});
},
},$('#add-instr').click(function() {
$('#column-left').append(`
<article class="instruction">
<div class="name">
${$('#i-name').val()}
<button class="remove">x</button>
</div>
<div class="desc">
${$('#i-desc').val()}
</div>
</article>
`);
});
$('#column-left').on('click', '.remove', function() {
$(this).closest('.instruction').remove();
});Phrasing content, but no descendant label elements. No labelable elements other than the labeled control are allowed.
$('label > input').change(function() {
$(this).parent().toggleClass('active', this.checked);
});Некоторые HTML-элементы, такие как<ul>,<ol>,<table>и<select>имеют ограничения на то, какие элементы могут отображаться внутри них, или например элементы, такие как<li>,<tr>и<option>могут появляться только внутри других определённых элементов.
Это приведёт к проблемам при использовании компонентов с элементами, которые имеют такие ограничения. Например:
<table> <blog-post-row></blog-post-row> </table>
Пользовательский компонент<blog-post-row>будет поднят выше, так как считается недопустимым содержимым, вызывая ошибки в итоговой отрисовке. К счастью, специальный атрибутisпредоставляет решение этой проблемы:
<table> <tr is="blog-post-row"></tr> </table>
.accordion__grandchild__item, а переключаете видимость у родительских элементов - .accordion__grandchild__group. Надо как-то устранить это печальное несоответствие.