Question

我正在尝试通过使每个手风琴项在用户向下滚动页面时自动打开来增强JS手风琴的视觉效果。他们不需要自动关闭。

我使用的手风琴在“单击”时执行2个动作：

手风琴父级'div'元素：class .is-open 已应用
手风琴儿童'div'内容：
a。）删除属性 aria-hidden =“ true” 和隐藏
b。）应用的属性 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");
            }
        });
    });

Answer 1

这有效。请随时建议如何清理它。

<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");
    }
});
});

在屏幕上可见时自动打开手风琴

1 个答案: