Тут “Управление структурой: /bitrix/templates/aspro-lite/components/bitrix/news.detail/partners”
Этот JavaScript-код, использующий библиотеку jQuery (обозначается символом `$`) и функции Bitrix (`BX.message`), предназначен для реализации функционала "Показать больше / Скрыть" для текстового блока.
Вот подробный разбор того, что он делает:
-$(document).ready((function(){ ... }));
<li>Это стандартная конструкция jQuery. Код внутри этой функции будет выполнен только после того, как вся HTML-структура страницы (DOM) будет полностью загружена и готова к взаимодействию.
- Внутренняя `(function(){ ... })()` — это самовызывающаяся анонимная функция (IIFE). Она создает локальную область видимости для переменных, предотвращая конфликты с другими скриптами.let detailTextBlock = document.querySelector(".partner-detail__text");
<li>Находит на странице первый HTML-элемент с CSS-классом `partner-detail__text` и сохраняет ссылку на него в переменной `detailTextBlock`. Это стандартный метод JavaScript для работы с DOM.detailTextBlock.scrollHeight > detailTextBlock.clientHeight && (...)
<li>Это условие проверяет, превышает ли полная высота контента элемента (`scrollHeight`) его видимую высоту (`clientHeight`).
<li>`scrollHeight`: Полная высота содержимого элемента, включая ту часть, которая может быть не видна из-за прокрутки или ограничения высоты.
- `clientHeight`: Видимая внутренняя высота элемента (включая padding, но не включая border, margin или горизонтальную полосу прокрутки). - Оператор `&&` (логическое И) работает так, что если левая часть (`detailTextBlock.scrollHeight > detailTextBlock.clientHeight`) истинна, то выполняется правая часть (код в скобках `(...)`). Если левая часть ложна, правая часть не выполняется. Если текст не помещается (условие выше истинно), выполняется следующее:
<li>`$(".partner-detail__more-detail-text-link").removeClass("hide")`
<li>Находит HTML-элемент (или элементы) с классом `partner-detail__more-detail-text-link`. Предположительно, это ссылка "Показать больше".
- `.removeClass("hide")`: Удаляет CSS-класс `hide` у этого элемента. Это делает ссылку видимой (предполагается, что класс `hide` скрывает элемент, например, через `display: none;`). <li>Находит элемент ``, который является прямым потомком элемента с классом `partner-detail__more-detail-text-link` (это сам текст ссылки "Показать больше").
- `.click((function(){ ... }))`: Назначает этому `` обработчик события "клик". Код внутри `function(){ ... }` будет выполняться каждый раз, когда пользователь кликает на текст этой ссылки. Код, выполняемый при клике на ссылку "Показать больше / Скрыть":
<li>`$(".partner-detail__text").toggleClass("linecamp-4")`
<li>Находит элемент с классом `partner-detail__text` (тот самый текстовый блок).
- `.toggleClass("linecamp-4")`: Переключает класс `linecamp-4`. Если класса нет – добавляет, если есть – удаляет. Этот класс, вероятно, отвечает за ограничение текста до 4 строк (например, с помощью CSS свойства `-webkit-line-clamp: 4;`). <li>Это тернарный оператор (сокращенная форма `if-else`).
- Проверяет, есть ли сейчас у элемента `partner-detail__text` класс `linecamp-4` (то есть, текст свернут).
- Если класс `linecamp-4` ЕСТЬ (текст свернут):
<li>`$(".partner-detail__more-detail-text-link > span").html(BX.message("MORE_DETAIL_TEXT"))`
- Текст ссылки (`` внутри `.partner-detail__more-detail-text-link`) меняется на значение, полученное из `BX.message("MORE_DETAIL_TEXT")`. `BX.message` – это функция Bitrix для получения локализованных (переведенных) строк. Вероятно, это будет "Подробнее" или "Show more". <li>`$(".partner-detail__more-detail-text-link > span").html(BX.message("HIDE_DETAIL_TEXT"))`
- Текст ссылки меняется на значение из `BX.message("HIDE_DETAIL_TEXT")` (например, "Скрыть" или "Hide"). Итого:
Этот скрипт автоматически определяет, нужно ли показывать ссылку "Подробнее" для текстового блока. Если текст не помещается, ссылка отображается. При клике на нее текст либо сворачивается до 4 строк, либо разворачивается полностью, а текст самой ссылки меняется соответственно ("Подробнее" / "Скрыть") с использованием языковых фраз Bitrix.
Чтобы изменить логику так, чтобы по умолчанию текст был полностью показан, а при нажатии на ссылку он сворачивался (и ссылка меняла текст), нужно сделать следующее:
-
Начальное состояние:
<li>Текстовый блок `.partner-detail__text` не должен иметь класс `linecamp-4` (чтобы текст был виден полностью). Если он добавляется через CSS по умолчанию, его нужно будет убрать скриптом.
- Ссылка `.partner-detail__more-detail-text-link` должна быть видна (класс `hide` у нее должен отсутствовать или быть удален).
- Текст ссылки должен быть "Скрыть" (`BX.message("HIDE_DETAIL_TEXT")`). Логика при клике:
<li>Переключить класс `linecamp-4` на блоке `.partner-detail__text`.
- Если класс `linecamp-4` добавлен (текст свернулся), изменить текст ссылки на "Подробнее" (`BX.message("MORE_DETAIL_TEXT")`).
- Если класс `linecamp-4` удален (текст развернулся), изменить текст ссылки на "Скрыть" (`BX.message("HIDE_DETAIL_TEXT")`). Условие показа ссылки: Ссылку "Скрыть/Подробнее" имеет смысл показывать только если есть что скрывать/показывать, то есть если `scrollHeight > clientHeight`. Если весь текст и так помещается, кнопка не нужна.
Вот измененный код:$(document).ready((function() {
const detailTextBlockDOM = document.querySelector(".partner-detail__text"); // Получаем DOM элемент
if (detailTextBlockDOM) { // Убедимся, что элемент существует
const $detailTextBlock = $(detailTextBlockDOM); // jQuery-обертка для текстового блока
const $moreDetailLink = $(".partner-detail__more-detail-text-link");
const $moreDetailLinkSpan = $moreDetailLink.find("span");
// Проверяем, есть ли вообще что скрывать/показывать
if (detailTextBlockDOM.scrollHeight > detailTextBlockDOM.clientHeight) {
// Текст не помещается, значит функционал "скрыть/показать" нужен
// 1. Убедимся, что текст по умолчанию полностью виден (удаляем класс linecamp-4, если он был)
$detailTextBlock.removeClass("linecamp-4");
// 2. Показываем ссылку
$moreDetailLink.removeClass("hide");
// 3. Устанавливаем начальный текст ссылки на "Скрыть"
$moreDetailLinkSpan.html(BX.message("HIDE_DETAIL_TEXT"));
// 4. Назначаем обработчик клика на всю ссылку (а не только на span)
$moreDetailLink.on("click", function(e) {
e.preventDefault(); // Предотвращаем стандартное действие ссылки, если это <a>
$detailTextBlock.toggleClass("linecamp-4"); // Переключаем класс для сворачивания/разворачивания
// Обновляем текст ссылки в зависимости от состояния
if ($detailTextBlock.hasClass("linecamp-4")) {
// Текст свернут, предлагаем "Подробнее"
$moreDetailLinkSpan.html(BX.message("MORE_DETAIL_TEXT"));
} else {
// Текст развернут, предлагаем "Скрыть"
$moreDetailLinkSpan.html(BX.message("HIDE_DETAIL_TEXT"));
}
});
} else {
// Весь текст помещается, ссылка "Скрыть/Подробнее" не нужна
$moreDetailLink.addClass("hide"); // Скрываем ссылку
}
}
})); Пояснения к изменениям:
- `const detailTextBlockDOM = document.querySelector(".partner-detail__text");`: Получаем сырой DOM-элемент, чтобы иметь доступ к `scrollHeight` и `clientHeight`.
- `if (detailTextBlockDOM)`: Добавлена проверка на существование элемента, чтобы избежать ошибок, если его нет на странице.
- `if (detailTextBlockDOM.scrollHeight > detailTextBlockDOM.clientHeight)`: Этот блок теперь определяет, нужно ли вообще активировать функционал "скрыть/показать". Если весь текст помещается, ссылка будет скрыта.
- `$detailTextBlock.removeClass("linecamp-4");`: Убеждаемся, что при инициализации текст полностью показан (если вдруг класс `linecamp-4` был добавлен через HTML/CSS по умолчанию).
- `$moreDetailLink.removeClass("hide");`: Делаем ссылку видимой.
- `$moreDetailLinkSpan.html(BX.message("HIDE_DETAIL_TEXT"));`: Устанавливаем начальный текст ссылки "Скрыть".
- `$moreDetailLink.on("click", function(e) { ... });`: Обработчик клика теперь назначен на всю ссылку (`.partner-detail__more-detail-text-link`), а не только на внутренний ``. Это более стандартная практика и увеличивает область клика. `e.preventDefault()` добавлено на случай, если ссылка является тегом `<a>` с атрибутом `href`.
- Логика внутри обработчика клика осталась прежней, так как она корректно переключает состояние и текст.
- `else { $moreDetailLink.addClass("hide"); }`: Если текст полностью помещается, ссылка скрывается.
Предположения:
- В вашем HTML есть элемент с классом `partner-detail__text`.
- В вашем HTML есть элемент (вероятно, ссылка `<a>`) с классом `partner-detail__more-detail-text-link`, внутри которого есть `` для текста.
- CSS-класс `hide` отвечает за скрытие элемента (например, `display: none;`).
- CSS-класс `linecamp-4` отвечает за ограничение текста до 4 строк.
- `BX.message("HIDE_DETAIL_TEXT")` и `BX.message("MORE_DETAIL_TEXT")` корректно возвращают локализованные строки "Скрыть" и "Подробнее".
- Во сложении бэкап жс