accordion jQuery, di chuyển đầu tab đã nhấp lên trên cùng, không hoạt động nếu tab được mở rộng ở trên tab đang được nhấp?

Question

Có một chút vấn đề với việc nhận được sự phù hợp jquery của tôi để làm những gì tôi muốn.

Tôi luôn muốn tab đang được nhấp để cuộn đến số lượng pixel cố định từ đầu trang và tôi đã làm cho nó hoạt động. Nhưng bất cứ khi nào tab đang hoạt động ở trên tab đang được nhấp và nếu trang đã được cuộn xuống một chút, phần trên cùng và một phần nội dung của tab được nhấp được cuộn lên trên đầu trang.

Đây là những gì tôi đã nhận:

$(function() { 
    $("#accordion").accordion({ 
     autoHeight: false, 
     collapsible: true, 
     heightStyle: "content", 
     active: 0, 
     animate: 300 
    }); 
    $('#accordion h3').bind('click',function(){ 
     theOffset = $(this).offset(); 
     $('body,html').animate({ 
      scrollTop: theOffset.top - 100 
     }); 
    }); 
}); 

Dưới đây là một fiddle để minh họa cho vấn đề của tôi,

Ví dụ, có "phần 2" mở rộng, di chuyển xuống và nhấp vào "phần 3" tab và nó tất cả các cuộn ra khỏi trang, cách khác xung quanh nó hoạt động mặc dù.

Và nếu đóng tab hoạt động trước khi mở một tab mới, nó cũng hoạt động tốt vì vậy tôi giả định điều này có liên quan đến chiều cao của tab thu gọn làm lộn xộn cuộn lên chức năng hàng đầu !?

Hy vọng ai đó có thể giúp đỡ, tôi có thể tiếp cận cách này sai. Tôi thực sự không biết những gì tôi đang thực sự làm như kỹ năng jquery của tôi được giới hạn trong một sự hiểu biết cơ bản cắt n 'dán! ^^

Cảm ơn trước và tất cả trợ giúp và khu vực con trỏ được chào đón nhiều hơn! :)

Chúc mừng

Answer 1

Có, độ cao của tab bị đóng mà nguyên nhân gây ra sự cố.

Đầu những thay đổi h3 được nhấp ngay sau đó do sự sụp đổ của một tab phía trên nó.

Cách khắc phục (có thể là xấu), là kích hoạt hoạt ảnh cuộn sau khi hoạt ảnh thu gọn kết thúc, tức là nếu hoạt ảnh thu gọn được đặt trong 300ms, hãy bắt đầu hoạt ảnh cuộn sau 310ms hoặc gì đó.

$(function() { 
     $("#accordion").accordion({ 
      autoHeight: false, 
      collapsible: true, 
      heightStyle: "content", 
      active: 0, 
      animate: 300 // collapse will take 300ms 
     }); 
     $('#accordion h3').bind('click',function(){ 
      var self = this; 
      setTimeout(function() { 
       theOffset = $(self).offset(); 
       $('body,html').animate({ scrollTop: theOffset.top - 100 }); 
      }, 310); // ensure the collapse animation is done 
     }); 
}); 

Updated Fiddle

Answer 2

Bạn có thể thêm một chức năng kích hoạt để accordion. Bằng cách đó, nó kích hoạt khi các hoạt ảnh/ẩn khác đã hoàn thành.

$(function() { 
    $("#accordion").accordion({ 
     autoHeight: false, 
     collapsible: true, 
     heightStyle: "content", 
     active: 0, 
     animate: 300, 
     activate: function(event, ui) { 
      try { 
       theOffset = ui.newHeader.offset(); 
       $('body,html').animate({ 
        scrollTop: theOffset.top 
       }); 
      } catch(err){} 
     } 
    }); 
}); 

cần thử bắt buộc vì ui.newHeader không được xác định nếu bạn đang thu gọn tab accordion mở.