在屏幕外打开内容时折叠焦点

Accordion Focus when opening content off screen

本文关键字：折叠 焦点 屏幕      更新时间：2023-09-26

我在这个jfiddle中举了一个例子：https://jsfiddle.net/kLh8r294/2/

这是javascript：

$(document).ready(function() {
    function close_accordion_section() {
        $('.accordion .accordion-section-title').removeClass('active');
        $('.accordion .accordion-section-content').slideUp(1000).removeClass('open');
    }
    $('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = $(this).closest('.accordion-section-title');
        if(currentAttrValue.hasClass('active')) {
            close_accordion_section();
        }else {
            close_accordion_section();
            // Add active class to section title
            currentAttrValue.addClass('active');
            // Open up the hidden content panel
            $('.accordion ' + currentAttrValue.attr('href')).slideDown(1000).addClass('open'); 
        }
        e.preventDefault();
    });
});

其余的在jsfiddle上。

当我打开手风琴并且有很多内容时，内容会滚动到屏幕之外。现在我举了一个例子"第一个"和"最后一个"。

例如，我想使焦点停留在手风琴标题上，因为它正在打开，所以当内容离开屏幕时，用户仍然有点击的手风琴的开头。如果它有点偏离手风琴的焦点，它应该平滑地滚动到它，而不仅仅是一次跳跃.

jquery或javascript中已经内置了什么可以使用吗？我在去的时候学习所有这些，所以任何帮助都会得到认可或洞察力。

最简单的选择可能是 JS 中的最后一行：

document.getElementById("yourTargetSelector").scrollIntoView();

或：

document.getElementById(this).scrollIntoView();

为了平滑滚动，您可以使用scrollTo函数。请参考以下链接：

j查询滚动到元素

相关文章：