javascript - 单击 Accordion 中带有元素 id 的链接时打开 JQuery Accordion

标签 javascript jquery html css jquery-ui

这是我的问题 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/

相关文章:

javascript - 缩放 dojox.charting.chart 时如何设置偏移量?

javascript - MutationObserver 未检测到额外的表行

html - 连接两个 Bootstrap 列内容的短线

javascript - 使用 javascript 移动 div 会导致位置 :relative to position:static 发生意外更改

jquery - 将 JS 文件放在 Css 之前导致边距错误

html - 如何从选择下拉列表中删除滚动条

javascript - 在 JavaScript 中获取 bootstrap Datetimepicker 的值

javascript - 如何访问闭包内的变量

javascript - 打印工作日并检查该工作日是否存在日期

javascript - 如何从 ASP.NET 委托(delegate)执行 Response.Redirect