当与手风琴内的元素的ID链接被点击

打开JQuery的手风琴这里是我的问题http://jsfiddle.net/uJ3W5/12/当与手风琴内的元素的ID链接被点击

正如你可以在上面的链接手风琴的第1部分中的元素看到4个按钮。但是，当手风琴关闭时，这些链接不起作用。

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

非常感谢！

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

来源

2014-02-25 Shane

我似乎已经得到它与1按钮： http://jsfiddle.net/uJ3W5/16/ – Shane

知道了！：D 工作小提琴在这里http://jsfiddle.net/uJ3W5/19/ – Shane

避免在评论中提出问题 – LcSalazar

实际上，它可以像你想的那样工作，你将不得不使用回调函数，所以只有当手风琴打开完成时才会调用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/

选为右一不拿你想要的屏幕答案。我的一个人。

来源

2014-02-25 14:47:58 LcSalazar

按钮在第一次点击后不起作用 –

已修复：http://jsfiddle.net/uJ3W5/24/ – LcSalazar

@ LcSalazar嘿，如果另一个手风琴已经打开，那么这个按钮不起作用。 – Shane

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

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

防止默认的动作及具体滚动到需要的元素，因为激活一个手风琴面板将触发一个滚动到该面板的顶部。

来源

2014-02-25 14:35:22

是的，谢谢。自己了解：D在这里工作的小提琴http://jsfiddle.net/uJ3W5/19/ – Shane

这只是打开手风琴，它不会把页面锚定。请看看我的回答，使用更新的回调 – LcSalazar

将页面移动到面板内部的锚元素上，而不仅仅是活动面板的顶部 –

使用此功能：

$(".buttons a").on('click', function(e){ 
    e.preventDefault(); 
    var _id=$(this).data("id"); 
    $("#accordion").accordion("option", "active", 0); 
    $(document).scrollTop($("#btn"+_id).offset().top); 
});

和数据-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/

希望它可以帮助！

来源

2014-02-25 14:45:48 campsjos

因为在打开手风琴之前它搜索'id'，所以你的解决方案根本不能很好地工作。@ Shane。这就是为什么我建议你使用'preventDefault（）'功能，然后打开手风琴，然后搜索'id' – campsjos

谢谢。这工作非常好！ – Shane

如果您将我的答案标为好答案，或者至少给我+1，我将不胜感激:) – campsjos

当与手风琴内的元素的ID链接被点击

回答

相关问题