点击时，如何关注Accordion顶部标题 [英] How to focus the Accordion top header when we click on that

问题描述

我的手风琴JS FIDDLE

我试图专注于手风琴里面的header或first div，但它不起作用。

在默认情况下，js小提琴是html积极，它包含11个问题。
现在 PHP 默认情况下已折叠，当我们点击它时，它会打开， HTML 会崩溃。

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

请参阅我共享的js小提琴。 / p>

我尝试了3种不同的方法，但都没有成功：

  $（＃panelForPHP）。click（function（）{$（＃accordionPHP）。focus（）;}）; 
 $（＃panelForPHP）。click（function（）{$（＃collapsePHP1）。focus（）;}）; 
 $（＃panelForPHP）。click（function（）{$（＃panelForPHP）。focus（）;}）; 
  

解决方案

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

在这种情况下，您需要使用'.in'类捕获最后的面板体。

  var panel = $（this）.find（'。in' ）。持续（）; 
  

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

JS FIDDLE OF MY ACCORDION

I am trying to focus on header or first div which is inside of accordion but it is not working.

In the js fiddle by default html is active and it consist of 11 questions in it. And now PHP by default it is collapsed and when we click on it it will open and HTML will collapse.

My problem is when i click on PHP it is showing the last question in my case it is showing 11th question of PHP, Actually it should show the first quuestion of PHP how can i achieve it..?

Please see the js fiddle which i have shared.

i have tried with 3 different ways but none are working:

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

解决方案

The hierarchical structure of accordions is making the issue little complex in your case. When you open 'question 11' of 'PHP' it scrolls to the first element with '.in' class. The '.in' class is inserted by bootstrap scripts to the active panel body. When 'question 11' is clicked there are two active panel bodies, first containing 11 questions under PHP and second containing answer of question 11.

In this scenario, you need to capture the last panel body with '.in' class.

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

If you close the PHP(parent accordion) leaving the questions(child accordion) open, and open parent accordion again it'll scroll to last open child accordion as it is the last element with '.in' class.

这篇关于点击时，如何关注Accordion顶部标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！