当我们单击手风琴顶部标题时，如何聚焦它.

Question

JS我的手风琴小提琴

我正在尝试专注于手风琴内部的标题或第一个div，但它不起作用。

在js中，默认情况下，html是活动的，它由11个问题组成。 现在PHP默认情况下它是折叠的，当我们单击它时，它将打开并且HTML将折叠。

我的问题是当我单击PHP它显示最后一个问题时，它显示了 PHP 的第 11 个问题，实际上它应该显示 PHP 的第一个队列我如何实现它..？

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

我已经尝试了 3 种不同的方法，但没有一种有效：

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

向上滚动到面板主体顶部

$('#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
    });
});

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

在此方案中，您需要使用".in"类捕获最后一个面板主体。

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

如果您关闭 PHP(父手风琴(使问题(子手风琴(保持打开状态，然后再次打开父手风琴，它将滚动到最后一个打开的子手风琴，因为它是带有".in"类的最后一个元素。