Question

我试图这样做，当点击并打开手风琴面板时，它将移动到顶部，这样用户就不必向下滚动来查看内容。这是我到目前为止所做的，但我尝试的任何东西似乎都无法工作，当我添加并激活功能时，整个手风琴功能都会停止工作。任何帮助是极大的赞赏。感谢。

$(function () {

     $(".accordion").accordion({
        collapsible: true,
        active: false,
        heightStyle: "content", 
        animate: 150,

             //This makes it possible for multiple panels to be open at the same time

            beforeActivate: function(event, ui) {
             // The accordion believes a panel is being opened
            if (ui.newHeader[0]) {
                var currHeader  = ui.newHeader;
                var currContent = currHeader.next('.ui-accordion-content');
             // The accordion believes a panel is being closed
            } else {
                var currHeader  = ui.oldHeader;
                var currContent = currHeader.next('.ui-accordion-content');
            }
             // Since we've changed the default behavior, this detects the actual status
            var isPanelSelected = currHeader.attr('aria-selected') == 'true';

             // Toggle the panel's header
            currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!               isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));

            // Toggle the panel's icon
            currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);

             // Toggle the panel's content
            currContent.toggleClass('accordion-content-active',!isPanelSelected)    
            if (isPanelSelected) { currContent.slideUp(); }  else { currContent.slideDown(); }

            return false; // Cancels the default action
        }

});

Answer 1

这是我能够做的事情，使用stackoverflow中的多篇文章作为资源。我想出了一个简单的javascript函数，它使用jquery animate滚动到页面上任何元素的顶部。我叫它totop（）：

function totop(element) {
    offset = element.offset();
    $("html").animate({scrollTop:offset.top},500);
}

然后在文档就绪函数中，我定义一个事件来执行该函数，当点击手风琴上的面板（由ID accord-1标识）时：

$("#accord-1").on("accordionactivate",function(event,ui) {
    totop(ui.newHeader);
});

这就像我的客户想要的那样。我在多个页面上使用它。这是一个简单的示例页面：

test accordion

Jquery手风琴面板在打开时移动到顶部

1 个答案: