Подробнее / скрыть | Партнёры | выводить текст полностью. Аспро лайтшоп партнеры.

Тут “Управление структурой: /bitrix/templates/aspro-lite/components/bitrix/news.detail/partners”

Этот JavaScript-код, использующий библиотеку jQuery (обозначается символом $) и функции Bitrix (BX.message), предназначен для реализации функционала “Показать больше / Скрыть” для текстового блока.

Вот подробный разбор того, что он делает:

• $(document).ready((function(){ ... }));

• Это стандартная конструкция jQuery. Код внутри этой функции будет выполнен только после того, как вся HTML-структура страницы (DOM) будет полностью загружена и готова к взаимодействию.

• Внутренняя (function(){ ... })() — это самовызывающаяся анонимная функция (IIFE). Она создает локальную область видимости для переменных, предотвращая конфликты с другими скриптами.

• let detailTextBlock = document.querySelector(".partner-detail__text");

• Находит на странице первый HTML-элемент с CSS-классом partner-detail__text и сохраняет ссылку на него в переменной detailTextBlock. Это стандартный метод JavaScript для работы с DOM.

• detailTextBlock.scrollHeight > detailTextBlock.clientHeight && (...)

• Это условие проверяет, превышает ли полная высота контента элемента (scrollHeight) его видимую высоту (clientHeight).

• scrollHeight: Полная высота содержимого элемента, включая ту часть, которая может быть не видна из-за прокрутки или ограничения высоты.

• clientHeight: Видимая внутренняя высота элемента (включая padding, но не включая border, margin или горизонтальную полосу прокрутки).

• Если scrollHeight больше clientHeight, это означает, что в блоке detailTextBlock есть скрытый текст (текст не помещается в видимую область).

• Оператор && (логическое И) работает так, что если левая часть (detailTextBlock.scrollHeight > detailTextBlock.clientHeight) истинна, то выполняется правая часть (код в скобках (...)). Если левая часть ложна, правая часть не выполняется.

• Если текст не помещается (условие выше истинно), выполняется следующее:

• $(".partner-detail__more-detail-text-link").removeClass("hide")

• Находит HTML-элемент (или элементы) с классом partner-detail__more-detail-text-link. Предположительно, это ссылка “Показать больше”.

• .removeClass("hide"): Удаляет CSS-класс hide у этого элемента. Это делает ссылку видимой (предполагается, что класс hide скрывает элемент, например, через display: none;).

• ,$(".partner-detail__more-detail-text-link > span").click((function(){ ... }))

• Находит элемент “, который является прямым потомком элемента с классом partner-detail__more-detail-text-link (это сам текст ссылки “Показать больше”).

• .click((function(){ ... })): Назначает этому “ обработчик события “клик”. Код внутри function(){ ... } будет выполняться каждый раз, когда пользователь кликает на текст этой ссылки.

• Код, выполняемый при клике на ссылку “Показать больше / Скрыть”:

• $(".partner-detail__text").toggleClass("linecamp-4")

• Находит элемент с классом partner-detail__text (тот самый текстовый блок).

• .toggleClass("linecamp-4"): Переключает класс linecamp-4. Если класса нет – добавляет, если есть – удаляет. Этот класс, вероятно, отвечает за ограничение текста до 4 строк (например, с помощью CSS свойства -webkit-line-clamp: 4;).

• $(".partner-detail__text").hasClass("linecamp-4") ? ... : ...

• Это тернарный оператор (сокращенная форма if-else).

• Проверяет, есть ли сейчас у элемента partner-detail__text класс linecamp-4 (то есть, текст свернут).

• Если класс linecamp-4 ЕСТЬ (текст свернут):

• $(".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”.

• Если класса linecamp-4 НЕТ (текст развернут):

• $(".partner-detail__more-detail-text-link > span").html(BX.message("HIDE_DETAIL_TEXT"))

• Текст ссылки меняется на значение из BX.message("HIDE_DETAIL_TEXT") (например, “Скрыть” или “Hide”).

Итого:

Этот скрипт автоматически определяет, нужно ли показывать ссылку “Подробнее” для текстового блока. Если текст не помещается, ссылка отображается. При клике на нее текст либо сворачивается до 4 строк, либо разворачивается полностью, а текст самой ссылки меняется соответственно (“Подробнее” / “Скрыть”) с использованием языковых фраз Bitrix.

Чтобы изменить логику так, чтобы по умолчанию текст был полностью показан, а при нажатии на ссылку он сворачивался (и ссылка меняла текст), нужно сделать следующее:

• Начальное состояние:

• Текстовый блок .partner-detail__text не должен иметь класс linecamp-4 (чтобы текст был виден полностью). Если он добавляется через CSS по умолчанию, его нужно будет убрать скриптом.

• Ссылка .partner-detail__more-detail-text-link должна быть видна (класс hide у нее должен отсутствовать или быть удален).

• Текст ссылки должен быть “Скрыть” (BX.message("HIDE_DETAIL_TEXT")).

• Логика при клике:

• Переключить класс 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(); // Предотвращаем стандартное действие ссылки, если это

$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()` добавлено на случай, если ссылка является тегом с атрибутом href.

• Логика внутри обработчика клика осталась прежней, так как она корректно переключает состояние и текст.

• else { $moreDetailLink.addClass("hide"); }: Если текст полностью помещается, ссылка скрывается.

Предположения:

• В вашем HTML есть элемент с классом partner-detail__text.

• В вашем HTML есть элемент (вероятно, ссылка ) с классом `partner-detail__more-detail-text-link`, внутри которого есть для текста.

• CSS-класс hide отвечает за скрытие элемента (например, display: none;).

• CSS-класс linecamp-4 отвечает за ограничение текста до 4 строк.

• BX.message("HIDE_DETAIL_TEXT") и BX.message("MORE_DETAIL_TEXT") корректно возвращают локализованные строки “Скрыть” и “Подробнее”.

• Во сложении бэкап жс

Ищете надежного партнера по веб-разработке и автоматизации? Мы помогаем бизнесу расти с помощью современных технологий, автоматизации процессов и экспертного SEO. Свяжитесь с нами, чтобы обсудить вашу задачу.