Автоматически открывать аккордеон при отображении на экране - PullRequest
Новая
       19

Автоматически открывать аккордеон при отображении на экране

0 голосов
/ 14 декабря 2018

Я пытаюсь улучшить визуальный эффект аккордеона JS, позволяя каждому элементу аккордеона автоматически открываться, когда пользователь прокручивает страницу вниз.Им не нужно автоматически закрываться.

Используемый мной аккордеон выполняет 2 действия при нажатии:

  1. Родитель аккордеона 'div' Элемент: класс .is-open применяется
  2. дочерний элемент Accordion 'div' Содержимое:
    a.) Удаленные атрибуты aria-hidden = "true" & hidden
    б.) Атрибуты применены aria-hidden = "false"

Как я могу добиться принудительного выполнения этих двух действий, чтобы использовать Scroll / Visible, а не Click?

Мои знания JS ограничены.Я не могу произвольно написать JS, но могу понять и манипулировать им.

ПОЛУРАБОТНАЯ КОНЦЕПЦИЯ (основанная на липком заголовке) - она ​​выполняется, но не является надлежащим способом для достижения желаемогорезультат. 


    jQuery(function($) {
      var acdn = $(".bdt-accordion-item");
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 50) {
                acdn.addClass("bdt-open");
            } else {
                acdn.removeClass("bdt-open");
            }
        });
    });

    jQuery(function($) {
      var con = $(".bdt-accordion-content");
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 50) {
                document.getElementsByClassName("bdt-accordion-content")[0].setAttribute("aria-hidden", "false");
                document.getElementsByClassName("bdt-accordion-content")[0].removeAttribute("hidden");
            } else {
                document.getElementsByClassName("bdt-accordion-content")[0].setAttribute("aria-hidden", "true");
                document.getElementsByClassName("bdt-accordion-content")[0].setAttribute("hidden");
            }
        });
    });

1 Ответ

0 голосов
/ 18 декабря 2018

Это сработало.Пожалуйста, не стесняйтесь предложить, как очистить его. 

<script type="text/javascript">
  jQuery(function($) {
  var acdn = $("#bdt-accordion-a189677 .bdt-accordion-item");
    $(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 400) {
        acdn.addClass("bdt-open");
    } else {
        acdn.removeClass("bdt-open");
    }
});
});


jQuery(function($) {
   var con = $("#bdt-accordion-a189677 .bdt-accordion-content");
   $(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 400) {
        document.getElementsByClassName("bdt-accordion-content")[0].setAttribute("aria-hidden", "false");
        $('#bdt-accordion-a189677 .bdt-accordion-content').attr("hidden",false);
        con.addClass("animated");
        con.addClass("fadeIn");
    } else {
        document.getElementsByClassName("bdt-accordion-content")[0].setAttribute("aria-hidden", "true");
        $('#bdt-accordion-a189677 .bdt-accordion-content').attr("hidden",true);
        con.removeClass("animated");
        con.removeClass("fadeIn");
    }
});
});

...