单击与手风琴中的元素的ID链接时打开JQuery手风琴 [英] Open JQuery accordion when link with an id of element within the accordion is clicked
本文介绍了单击与手风琴中的元素的ID链接时打开JQuery手风琴的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的问题 http://jsfiddle.net/uJ3W5/12/
正如你可以看到顶部链接到手风琴第1节元素的4个按钮。但是当手风琴关闭时，这些链接不起作用。
我需要它，以便当您单击链接时，手风琴打开，页面滚动到相关部分，
我的HTML：
$ b$ b
< head>
< title> jQuery UI Accordion - 没有自动高度< / title>
< script src =// code.jquery.com/jquery-1.9.1.js\"> ;</script>
< script src =// code.jquery.com/ui/1.10.4/jquery-ui.js\"> ;</script>
< / head>
< body>
< div class =buttons>
< div>< a href =＃btn1class =btn btn-primary btn-large>一个< / a>< / div>
< div>< a href =＃btn2class =btn btn-primary btn-large>两个< / a>< / div>
< div>< a href =＃btn3class =btn btn-primary btn-large> Three< / a>< / div>
< div>< a href =＃btn4class =btn btn-primary btn-large>四< / a>< / div>
< / div>
< div id =accordion>
< h3>第1节< / h3>
< div>
< h3 id =btn1>一个< / h3>
< p> Mauris mauris ante，blandit et，ultrices a，susceros。 Nam mi。 Proin viverra leo ut odio。 Curabitur malesuada。 Vestibulum a velit eu ante scelerisque expputate。< / p>
< h3 id =btn2>两个< / h3>
< p> Mauris mauris ante，blandit et，ultrices a，susceros。 Nam mi。 Proin viverra leo ut odio。 Curabitur malesuada。 Vestibulum a velit eu ante scelerisque expputate。< / p>
< h3 id =btn3>三< / h3>
< p> Mauris mauris ante，blandit et，ultrices a，susceros。 Nam mi。 Proin viverra leo ut odio。 Curabitur malesuada。 Vestibulum a velit eu ante scelerisque expputate。< / p>
< h3 id =btn4>四< / h3>
< p> Mauris mauris ante，blandit et，ultrices a，susceros。 Nam mi。 Proin viverra leo ut odio。 Curabitur malesuada。 Vestibulum a velit eu ante scelerisque expputate。< / p>
< / div>
< h3>第2节< / h3>
< div>
< p> Sed non urna。 Donec et ante。黄疸。前庭坐在amet purus。 Vivamus hendrerit，dolor at aliquet laoreet，mauris turpis porttitor velit，faucibus interdum tellus libero ac justo。 Vivamus非量纲。在suscipit faucibus urna。 < / p>
< / div>
< h3>第3部分< / h3>
< div>
< p> Nam enim risus，molestie et，porta ac，aliquam ac，risus。 Quisque lobortis。 Phasellus pellentesque purus在massa。 Aenean在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。 < / p>
< ul>
< li>列表项< / li>
< li>列表项< / li>
< li>列表项< / li>
< li>列表项< / li>
< li>列表项< / li>
< li>列表项< / li>
< li>列表项< / li>
< / ul>
< / div>
< / div>
< / body>
< / html>
我的jquery：
$（function（）{
$（#accordion）.accordion（{
heightStyle：content，
active：false，
collapsible ：true
}）;
}）;
解决方案
实际上，您将必须使用回调函数，因此仅当手风琴打开完成时才调用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 ，active，0）;
}
}）;
在这里： http://jsfiddle.net/uJ3W5/28/
选择正确答案的答案不会将屏幕放在你想要的位置。我一个人。
Here is my issue http://jsfiddle.net/uJ3W5/12/
As you can see the 4 buttons at the top link to elements within section 1 of the accordion. However when the accordion is closed these links do not work.
I need it so that when you click the links, the accordion opens and the page scrolls to the relevant section, and I'm a bit stumped.
Thanks so much!
My HTML:
<head>
<title>jQuery UI Accordion - No auto height</title>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div class="buttons">
<div><a href="#btn1" class="btn btn-primary btn-large">One</a></div>
<div><a href="#btn2" class="btn btn-primary btn-large">Two</a></div>
<div><a href="#btn3" class="btn btn-primary btn-large">Three</a></div>
<div><a href="#btn4" class="btn btn-primary btn-large">Four</a></div>
</div>
<div id="accordion">
<h3>Section 1</h3>
<div>
<h3 id="btn1">One</h3>
<p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
<h3 id="btn2">Two</h3>
<p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
<h3 id="btn3">Three</h3>
<p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
<h3 id="btn4">Four</h3>
<p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
</div>
<h3>Section 2</h3>
<div>
<p>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. </p>
</div>
<h3>Section 3</h3>
<div>
<p>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. </p>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
</body>
</html>
My jquery:
$(function() {
$( "#accordion" ).accordion({
heightStyle: "content",
active: false,
collapsible: true
});
});
解决方案
Actually, so it can work exactly as you want, you will have to use a callback function, so a href is called only when the accordion open finishes.
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);
}
});
Here you go: http://jsfiddle.net/uJ3W5/28/
The answer chosen as the right one does not take the screen where you want. Mine one does.
这篇关于单击与手风琴中的元素的ID链接时打开JQuery手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
