Question

我正在尝试专注于手风琴内部的头部或第一个div，但它无效。

在js小提琴默认情况下，html处于活动状态，它包含11个问题。现在 PHP 默认情况下它已折叠，当我们点击它时它将打开， HTML 将崩溃。

我的问题是，当我点击PHP它显示了我的案例中的最后一个问题它显示第11个PHP问题，实际上它应该显示的第一个问题PHP 我怎样才能实现它？？

请参阅我分享的js小提琴。

我尝试了3种不同的方法，但没有一种方法可以使用：

$("#panelForPHP").click(function(){     $("#accordionPHP").focus(); });
$("#panelForPHP").click(function(){     $("#collapsePHP1").focus(); });
$("#panelForPHP").click(function(){     $("#panelForPHP").focus(); });

Answer 1

向上滚动到面板主体的顶部

$('#accordionMain').on('shown.bs.collapse', function() {

    var panel = $(this).find('.in');

    $('html, body').animate({
        scrollTop: panel.offset().top
    });
});

向上滚动到面板标题，

$('#accordionMain').on('shown.bs.collapse', function() {

    var panel = $(this).find('.in');

    $('html, body').animate({
        scrollTop: panel.offset().top -55
    });
});

Answer 2

手风琴的层次结构使得问题在你的情况下变得不复杂。当你打开'PHP'的'问题11'时，它会滚动到带有'.in'类的第一个元素。 '.in'类由引导脚本插入到活动的面板主体。当点击“问题11”时，有两个活动的面板主体，第一个包含PHP下的11个问题，第二个包含问题11的答案。

在这种情况下，您需要使用“.in”类捕获最后一个面板主体。

var panel = $(this).find('.in').last();

如果您关闭PHP（父手风琴），让问题（儿童手风琴）打开，再次打开父手风琴，它将滚动到最后一个打开的儿童手风琴，因为它是'。''类的最后一个元素。

点击它时如何聚焦Accordion顶部标题

2 个答案: