Làm thế nào để tập trung tiêu đề đầu Accordion khi chúng ta bấm vào đó

Question

JS FIDDLE OF MY ACCORDION

Tôi cố gắng để tập trung vào tiêu đề hoặc div đầu tiên đó là bên trong accordion nhưng nó không được làm việc.

Trong js fiddle theo mặc định html đang hoạt động và nó bao gồm 11 câu hỏi trong đó. Và bây giờ PHP theo mặc định, nó được thu gọn và khi chúng tôi nhấp vào nó sẽ mở và HTML sẽ thu gọn.

Vấn đề của tôi là khi tôi bấm vào PHP nó được hiển thị câu hỏi cuối cùng trong trường hợp của tôi nó đang hiển thị câu hỏi thứ 11 của PHP, Trên thực tế nó sẽ hiển thị quuestion đầu tiên của PHP làm thế nào tôi có thể đạt được nó ..?

Vui lòng xem js fiddle mà tôi đã chia sẻ.

tôi đã thử với 3 cách khác nhau nhưng không ai đang làm việc:

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

Answer 1

Để di chuyển lên đến đỉnh của bảng điều khiển thân

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

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

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

Để di chuyển đến bảng điều khiển-heading,

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

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

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

Answer 2

Cấu trúc phân cấp theo thứ tự là làm cho vấn đề trở nên phức tạp trong trường hợp của bạn. Khi bạn mở 'câu hỏi 11' của 'PHP' nó cuộn đến phần tử đầu tiên với lớp '.in'. Lớp '.in' được chèn bởi các kịch bản bootstrap vào phần thân của bảng điều khiển đang hoạt động. Khi 'câu hỏi 11' được nhấp vào có hai cơ quan bảng hoạt động, đầu tiên chứa 11 câu hỏi theo PHP và câu trả lời thứ hai chứa câu hỏi 11.

Trong trường hợp này, bạn cần chụp cơ thể cuối cùng bằng lớp '.in' .

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

Nếu bạn đóng PHP (mẹ accordion) để lại những câu hỏi (accordion con) mở, và accordion mẹ mở một lần nữa nó sẽ di chuyển kéo dài mở accordion con vì nó là yếu tố cuối cùng với' .in' lớp học.