Управление DOM-структурой в 1С-Битрикс с помощью BX.toggleClass

BX.toggleClass() — одна из самых «лёгких», но при этом крайне полезных функций ядра Bitrix JS-framework. Она избавляет от рутинных проверок наличия CSS-класса у узла и позволяет за один вызов добавить, удалить или «прокрутить» набор классов. Ниже — подробное руководство и подборка практических примеров, которые вы сможете вставить в свои компоненты или административные страницы, не опасаясь конфликтов и дублирования.

Быстрый справочник

BX.toggleClass(
  DOMNode node,
  string|array className
) : void

• node — DOM-элемент, с которым работаем. Обычно получаем через BX('id'), event.currentTarget или this.
• className — строка ('active') либо массив (['state-draft','state-ready','state-archived']).
• Строка → класс либо добавляется, либо убирается.
• Массив → классы «крутятся по кругу»: текущий убирается, следующий ставится.

Пример 1. Открываем и закрываем мобильное меню

<button id="burgerBtn" class="burger">
  ☰
</button>
<nav id="mobilePanel" class="mobile-panel"> … </nav>
<script>
BX.ready(() => {
  BX.bind(BX('burgerBtn'), 'click', () => {
    BX.toggleClass(BX('mobilePanel'), 'mobile-panel__opened');
  });
});
</script>

<style>
.mobile-panel { transform: translateY(-100%); transition: .3s ease-out; }
.mobile-panel__opened { transform: translateY(0); }
.burger { background:none; border:none; font-size:28px; cursor:pointer; }
</style>

При нажатии на «бургер» меню плавно выезжает и прячется обратно.

Пример 2. Ротация статусов карточки

<div id="postStatus" class="stage-draft">Черновик</div>
<script>
BX.ready(() => {
  const states = ['stage-draft', 'stage-review', 'stage-published'];
  const titles = {
    'stage-draft': 'Черновик',
    'stage-review': 'На проверке',
    'stage-published': 'Опубликовано'
  };
  BX.bind(BX('postStatus'), 'click', function () {
    BX.toggleClass(this, states);
    this.textContent = titles[this.classList[0]];
  });
});
</script>

<style>
.stage-draft { background:#ffe9b3; padding:6px 12px; cursor:pointer; }
.stage-review { background:#cce6ff; }
.stage-published { background:#c4f9c1; }
</style>

Пример 3. Подсветка строк в таблице результатов

<table class="report" id="reportT">
  <tr><td>Строка 1</td></tr>
  <tr><td>Строка 2</td></tr>
  <tr><td>Строка 3</td></tr>
</table>
<script>
BX.ready(() => {
  BX.bind(BX('reportT'), 'click', function (e) {
    const row = BX.getEventTarget(e).closest('tr');
    if (!row) return;
    const selected = this.querySelectorAll('.report__row--selected');
    selected.forEach(r => BX.removeClass(r, 'report__row--selected'));
    BX.toggleClass(row, 'report__row--selected');
  });
});
</script>

<style>
.report__row--selected { background:#f5ffbf; }
.report tr { cursor:pointer; }
</style>

Пример 4. Компонент «лайк» с подсчётом

<button id="likeButton" class="like" data-liked="0">
  [like] <span id="likeCnt">0</span>
</button>
<script>
BX.ready(() => {
  const btn = BX('likeButton');
  const count = BX('likeCnt');
  BX.bind(btn, 'click', function () {
    BX.toggleClass(this, 'like--pressed');
    const liked = this.dataset.liked === '0';
    this.dataset.liked = liked ? '1' : '0';
    count.textContent = (+count.textContent) + (liked ? 1 : -1);
    // AJAX-сохранение (сокращённо)
    BX.ajax.runComponentAction('vendor:like.button', 'toggle', {
      mode: 'class',
      data: { liked }
    });
  });
});
</script>

<style>
.like { color:#666; user-select:none; background:none; border:none; font-size:18px; cursor:pointer; }
.like--pressed { color:#e74c3c; }
</style>

Пример 5. «Живая» иконка-стрелка

<div id="arrowWrap" class="arrow-down">
  <img id="arrowPic" src="/local/img/arrow-down.svg" alt="toggle" />
</div>
<script>
BX.ready(() => {
  const wrap = BX('arrowWrap');
  const pic = BX('arrowPic');
  const classes = ['arrow-down', 'arrow-up', 'arrow-right'];
  BX.bind(wrap, 'click', function () {
    BX.toggleClass(this, classes);
    const cur = classes.find(cls => BX.hasClass(this, cls));
    pic.src = `/local/img/${cur}.svg`;
  });
});
</script>

<style>
#arrowWrap { width:64px; height:64px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; }
.arrow-down { background:#f0f0f0; }
.arrow-up { background:#d0ffd0; }
.arrow-right { background:#d0d7ff; }
</style>

Типичные ошибки и как их избежать

Производительность и семантика

• Не бойтесь частых вызовов. BX.toggleClass() внутри себя уже кеширует имя класса и использует classList, если браузер его поддерживает.
• Старайтесь избегать глобальных переменных. Используйте замыкания или data- атрибуты, чтобы передавать состояние.
• Соблюдайте семантику. Классы вида is-open, is-active раскрывают назначение лучше, чем абстрактное state-1.

Заключение

BX.toggleClass() — отличный пример того, как Битрикс аккуратно обёртывает нативные возможности браузера, упрощая работу фронтенд-разработчика. Используйте эту функцию всегда, когда нужно быстро переключить или «прокрутить» классы без лишних условий. Надеюсь, приведённые примеры вдохновят вас на собственные идеи и ускорят разработку интерфейсов в 1С-Битрикс.