Приветствую уважаемых знатоков.
Для начала постараюсь дать полную инфу.
MODX Revolution 2.8.3-pl (текущая версия)
Подключенные скрипты:
Код html:
<div class="parent">
<table class="table-m">
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
</tr>
<tr>
<td>Row 5</td>
</tr>
<tr class="hidden">
<td>Row 6</td>
</tr>
<tr class="hidden">
<td>Row 7</td>
</tr>
<tr class="hidden">
<td>Row 8</td>
</tr>
<tr class="hidden">
<td>Row 9</td>
</tr>
<tr class="hidden">
<td>Row 10</td>
</tr>
<tr class="hidden">
<td>Row 11</td>
</tr>
<tr class="hidden">
<td>Row 12</td>
</tr>
<tr class="hidden">
<td>Row 13</td>
</tr>
<tr class="hidden">
<td>Row 14</td>
</tr>
<tr class="hidden">
<td>Row 15</td>
</tr>
</table>
</div>
<button id="showMoreBtn">Посмотреть полностью</button>
JS-код:
$(document).ready(function() {
$("#showMoreBtn").click(function() {
$(".hidden").toggle();
if ($(this).text() === "Посмотреть полностью") {
$(this).text("Свернуть назад");
} else {
$(this).text("Посмотреть полностью");
}
});
});
JS для управления кнопкой - это ""
CSS - тут понятно - стиль кнопки и класс скрытия. Ошибки, что что-то здесь не соответствует, мол, класс в JS один, а в CSS или HTML другой - НЕТ. Однако кнопка мертва напрочь, хоть убейся.
Какая ожидалась цель от данного кода? Под таблицей кнопочка, нажатием на которую раскрываются несколько нижних строк таблицы. Затем кликом по этой же кнопке, таблица сворачивается обратно.
Почитал , что дело может быть в
scroll-behavior: smooth; , но этого нет в css файлах - проверено.
Кроме того, есть страница, у которой якори на
<h2> и ссылки навигационные к заголовкам - вот это работает совершенно корректно.
Тем временем, кнопка остаётся мёртвой. То ли нет коннекта c JS против здравого смысла, то ли дело в MODX и в неё надо что-то добавить, то ли конфликт скриптов, НО уже опробовано отключение других скриптов, кроме этого проблемного не работающего скрипта Это ничего не дало. Пробовал не подтягивать код из файлов, а вставить прямо в страницу через
<style> и <script> - это тоже ничего не дало.
Если кто сталкивался с таким, может, поделитесь решением? А если кто-то знает более интересный метод, ну хотя бы чтобы каждому TR не надо было задавать класс, а чтобы скрипт скрывал последние пять строк таблицы, например, используя класс таблицы, вообще здорово.
Кстати, так же я попробовал вот такую штуку
<style>
.my-table {
width: 100%;
border-collapse: collapse;
}
.my-table tbody td, .my-table thead th {
border: 1px solid #646a6e;
padding: 2px 5px;
}
.my-table thead tr th {
background: #00a140;
text-align: center;
}
.wrap-expand-table a[href^="#click-expand"], .wrap-expand-table a[href="#close"] {
text-decoration: none;
border-bottom: 1px dashed;
}
/* Если браузер не поддерживает структурные псевдоклассы, то список будет раскрыт и доступ к данным сохранится */
[id^="click-expand"] {
position: fixed; /* чтобы страница "не подпрыгивала" к id */
}
[id^="click-expand"]:target + .wrap-expand-table a[href^="#click-expand"],
[id^="click-expand"]:not(:target) + .wrap-expand-table tbody tr:nth-of-type(n+5), /* 5 — порядковый номер строки, после которой строки будут скрыты */
[id^="click-expand"]:not(:target) + .wrap-expand-table a[href="#close"] {
display: none;
}
</style>
<div id="click-expand1"/></div>
<div class="wrap-expand-table"><a href="#close">Свернуть</a><a href="#click-expand1">Развернуть</a>
<table class="my-table">
<thead>
<tr>
<th>Столбец 1</th>
<th>Столбец 2</th>
<th>Столбец 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Строка 1</td>
<td>Ячейка 1.1</td>
<td>Ячейка 1.2</td>
</tr>
<tr>
<td>Строка 2</td>
<td>Ячейка 2.1</td>
<td>Ячейка 2.2</td>
</tr>
<tr>
<td>Строка 3</td>
<td>Ячейка 3.1</td>
<td>Ячейка 3.2</td>
</tr>
<tr>
<td>Строка 4</td>
<td>Ячейка 4.1</td>
<td>Ячейка 4.2</td>
</tr>
<tr>
<td>Строка 5</td>
<td>Ячейка 5.1</td>
<td>Ячейка 5.2</td>
</tr>
<tr>
<td>Строка 6</td>
<td>Ячейка 6.1</td>
<td>Ячейка 6.2</td>
</tr>
<tr>
<td>Строка 7</td>
<td>Ячейка 7.1</td>
<td>Ячейка 7.2</td>
</tr>
<tr>
<td>Строка 8</td>
<td>Ячейка 8.1</td>
<td>Ячейка 8.2</td>
</tr>
</tbody>
</table>
<a href="#close">Cвернуть</a><a href="#click-expand1">Посмотреть весь список</a>
</div>
тупо вставить целиком и посмотреть результат. Однако при нажатии на кнопку у меня в адресной строке появляется якорь ромашка.рф/#click-expand и страница просто прокручивается полностью вверх к шапке сразу, затем я спускаю вниз, а там - нераскрытая таблица. То есть и эта чужая кнопка тоже мертва.
А вот этот мой JS скрипт
<script src="[[!dynamicFileVersion?&file=`/assets/templates/js/1.js`]]"></script>
работает как ни в чём не бывало...
$(document).ready(function () {
var a = document.querySelector('#secondary'), b = null, P = 0;
window.addEventListener('scroll', Ascroll, false);
document.body.addEventListener('scroll', Ascroll, false);
function Ascroll() {
if (b == null) {
var Sa = getComputedStyle(a, ''), s = '';
for (var i = 0; i < Sa.length; i++) {
if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
}
}
b = document.createElement('div');
b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
a.insertBefore(b, a.firstChild);
var l = a.childNodes.length;
for (var i = 1; i < l; i++) {
b.appendChild(a.childNodes[1]);
}
a.style.height = b.getBoundingClientRect().height + 'px';
a.style.padding = '0';
a.style.border = '0';
}
var Ra = a.getBoundingClientRect(),
R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('footer').getBoundingClientRect().top + 0);
if ((Ra.top - P) <= 0) {
if ((Ra.top - P) <= R) {
b.className = 'stop';
b.style.top = - R +'px';
} else {
b.className = 'fixed';
b.style.top = P + 'px';
}
} else {
b.className = '';
b.style.top = '';
}
window.addEventListener('resize', function() {
a.children[0].style.width = getComputedStyle(a, '').width
}, false);
}
});
В общем, очень странное дело происходит...
Простой
