这是我的问题 http://jsfiddle.net/uJ3W5/12/
如您所见,顶部的 4 个按钮链接到 Accordion 部分 1 中的元素。然而,当 Accordion 关闭时,这些链接不起作用。
我需要它,以便当您单击链接时, Accordion 打开并且页面滚动到相关部分,我有点难过。
非常感谢!
我的 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>
我的jquery:
$(function() {
$( "#accordion" ).accordion({
heightStyle: "content",
active: false,
collapsible: true
});
});
最佳答案
实际上,它可以完全按照您的意愿工作,您将不得不使用回调函数,因此只有在 Accordion 打开完成时才会调用 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/
选择正确的答案不会在您想要的屏幕上显示。我的有。
关于javascript - 单击 Accordion 中带有元素 id 的链接时打开 JQuery Accordion ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22016960/