单击手风琴中元素id的链接时打开JQuery手风琴

这是我的问题http://jsfiddle.net/uJ3W5/12/

正如你可以看到顶部的4个按钮链接到手风琴第1部分中的元素。 然而，当手风琴关闭时，这些链接不起作用。

我需要它，以便当你点击链接时，手风琴打开，页面滚动到相关部分，我有点难过。

非常感谢！

我的HTML：

      
 
One
 
Two
 
Three
 
Four
 
 
 
Section 1
 
 
One
 
Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
 
Two
 
Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
 
Three
 
Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
 
Four
 
Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
 
 
Section 2
 
 
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. 
 
 
Section 3
 
 
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. 
 
 
List item
 
List item
 
List item
 
List item
 
List item
 
List item
 
List item
 
 
 
   

我的jquery：

  $(function() { $( "#accordion" ).accordion({ heightStyle: "content", active: false, collapsible: true }); }); 

Answer 1

实际上，它可以完全按照您的意愿工作，您将不得不使用回调函数，因此只有在手风琴打开完成时才会调用href。

 var callback = function() {}; $(function() { $( "#accordion" ).accordion({ heightStyle: "content", active: false, collapsible: true, activate: function() { callback(); } }); }); $(".buttons a").click(function(event) { var active = $("#accordion").accordion("option", "active")+""; if(active != "0") { event.preventDefault(); var ahref = $(this).attr("href"); callback = function() { location.href = ahref; callback = function() { }; }; $("#accordion").accordion("option", "active", 0); } }); 

你去： http ： //jsfiddle.net/uJ3W5/28/

选择正确答案的答案不会将屏幕显示在您想要的位置。 我的一个。

Answer 2

使用此function：

 $(".buttons a").on('click', function(e){ e.preventDefault(); var _id=$(this).data("id"); $( "#accordion" ).accordion( "option", "active", 0 ); $(document).scrollTop( $("#btn"+_id).offset().top ); }); 

并向您的按钮添加data-id属性，如下所示：

  One Two Three Four 

你可以在这里看到它： http ： //jsfiddle.net/uJ3W5/22/

希望能帮助到你！

Answer 3

将事件附加到将打开手风琴的第一个面板的按钮，然后滚动到正确的元素。

 $(".buttons a").on("click", function(e) { e.preventDefault(); $("#accordion").accordion("option", "active",0); $(document).scrollTop( $($(e.target).attr("href")).offset().top ); }); 

需要防止默认操作并特别滚动到元素，因为激活手风琴面板将触发滚动到该面板的顶部。