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

Posted 2023-05-07

【中文标题】屏幕上可见时自动打开手风琴

【英文标题】：Auto-Open Accordion When Visible On Screen

【发布时间】：2019-05-15 19:21:09

【问题描述】：

我试图通过在用户向下滚动页面时启用每个手风琴项自动打开来增强 JS 手风琴的视觉冲击力。它们不需要自动关闭。

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

Accordion 父 'div' 元素：已应用类 .is-open 手风琴子 'div' 内容： a.) 属性被移除 aria-hidden="true" & hidden b.) 应用属性 aria-hidden="false"

如何强制这两个动作在 Scroll / is Visible 上触发，而不是在 Click 上触发？

我的 JS 知识有限。我不能随意写JS，但可以理解和操作。

---

SEMI-WORKING CONCEPT（基于sticky header）——它确实执行，但不是达到预期结果的正确方法。

jQuery（函数（$） var adn = $(".bdt-accordion-item"); $(窗口).scroll(函数() var scroll = $(window).scrollTop(); 如果（滚动> = 50） adn.addClass("bdt-open"); 别的 adn.removeClass("bdt-open"); ); ); jQuery（函数（$） var con = $(".bdt-手风琴内容"); $(窗口).scroll(函数() var scroll = $(window).scrollTop(); 如果（滚动> = 50） document.getElementsByClassName("bdt-accordion-content")[0].setAttribute("aria-hidden", "false"); document.getElementsByClassName("bdt-accordion-content")[0].removeAttribute("hidden"); 别的 document.getElementsByClassName("bdt-accordion-content")[0].setAttribute("aria-hidden", "true"); document.getElementsByClassName("bdt-accordion-content")[0].setAttribute("hidden"); ); );

【问题讨论】：

相关：***.com/questions/487073/…

【参考方案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");
    
);
);