MediaWiki:Test.js: различия между версиями

Версия от 18:07, 3 мая 2025

$(document).ready(function () {
  // Анимация раскрытия контента
  $('.collapsible-header').click(function () {
    var content = $(this).next('.collapsible-content');
    content.slideToggle(300, function() {
      // Анимация появления элементов после раскрытия
      $(this).find('li').each(function (index) {
        $(this).css('animation-delay', (index * 0.1) + 's');
        $(this).addClass('visible');
      });
    });
    $(this).toggleClass('open');
  });

  // Устанавливаем цвет границы из data-атрибута
  $('.recipe-card').each(function () {
    var borderColor = $(this).attr('data-border');
    if (borderColor) {
      $(this).css('border-color', borderColor);
    }
  });
});

@@ Строка 1: / Строка 1: @@
 $(document).ready(function () {
-   // Устанавливаем границу и цвет текущего блока
+   // Анимация раскрытия контента
-   $('.recipe-card').each(function () {
+   $('.collapsible-header').click(function () {
-     var $card = $(this);
+     var content = $(this).next('.collapsible-content');
-    var borderColor = $card.data('border');
+     content.slideToggle(300, function() {
-     var substanceColor = borderColor || '#81d4fa';
+      // Анимация появления элементов после раскрытия
+      $(this).find('li').each(function (index) {
-    // рамка карточки
+        $(this).css('animation-delay', (index * 0.1) + 's');
-    $card.css('border-color', borderColor);
+        $(this).addClass('visible');
+      });
-    // название вещества (цвет текста и underline)
+     });
-    var $sub = $card.find('.card-substance');
+     $(this).toggleClass('open');
-    $sub.text($card.data('substance'));
-    $sub.css('color', substanceColor);
-     // цвет линии под заголовками
-     $card.find('.collapsible-header').css('color', substanceColor);
    });
-   // Клик по заголовку — раскрытие контента
+   // Устанавливаем цвет границы из data-атрибута
-   $('.collapsible-header').click(function () {
+   $('.recipe-card').each(function () {
-     var $hdr = $(this);
+     var borderColor = $(this).attr('data-border');
-    var $content = $hdr.next('.collapsible-content');
+     if (borderColor) {
+       $(this).css('border-color', borderColor);
-    $content.toggleClass('show');
-     if ($content.hasClass('show')) {
-       $content.css('max-height', $content.get(0).scrollHeight + 'px');
-      // анимация элементов
-      $content.find('li').each(function (i) {
-        $(this)
-          .css('animation-delay', (i * 0.1) + 's')
-          .addClass('visible');
-      });
-    } else {
-      $content.css('max-height', '0');
      }
-    $hdr.toggleClass('open');
    });
 });