Question

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

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

非常感谢！

我的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 
    });
  });

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

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

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

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

Answer 3

使用此功能：

$(".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属性，如下所示：

    <a href="#btn1" data-id="1" class="btn btn-primary btn-large">One</a>
    <a href="#btn2" data-id="2" class="btn btn-primary btn-large">Two</a>
    <a href="#btn3" data-id="3" class="btn btn-primary btn-large">Three</a>
    <a href="#btn4" data-id="4" class="btn btn-primary btn-large">Four</a>

您可以在此处看到它：http://jsfiddle.net/uJ3W5/22/

希望它有所帮助！

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

3 个答案: