單擊具有手風琴中的元素的id的鏈接時，打開JQuery手風琴

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 個解決方案

解決方案1
1 已采納 2014-02-25 14:47:58

解決方案2
0 2014-02-25 14:35:22

解決方案3
0 2014-02-25 14:45:48

單擊具有手風琴中的元素的id的鏈接時，打開JQuery手風琴

問題描述

3 個解決方案

解決方案1 1 已采納 2014-02-25 14:47:58

解決方案2 0 2014-02-25 14:35:22

解決方案3 0 2014-02-25 14:45:48

解決方案1
1 已采納 2014-02-25 14:47:58

解決方案2
0 2014-02-25 14:35:22

解決方案3
0 2014-02-25 14:45:48