0

想知道是否有人可以提供帮助。

我正在使用手风琴在分类网站上显示子类别列表，有 3 个主要类别 - 我们将它们称为 X、Y、Z。

我的问题是子类别列表可能很长-并且在 X、Y、Z 之间不一致。目前，当单击标题 X 时-手风琴延伸到折叠之外，因此显然用户将向下滚动页面. 当用户单击 Y - 当前子类别列表要小得多时，手风琴将关闭以显示 Y 的子类别列表，但焦点不会在打开的 Y 手风琴上 - 窗口停留在子类别的底部X 完成。

是否有某种方法可以将用户引导回 ul.accordionMenu 的顶部？

JS在这里：

jQuery.fn.initMenu = function() {   
    return this.each(function(){  
        var theMenu = $(this).get(0);  
        $('.acitem', this).hide();  
        $('li.expand > .acitem', this).show();  
        $('li.expand > .acitem', this).prev().addClass('active');  
        $('li a', this).click(  
            function(e) {  
                e.stopImmediatePropagation();  
                var theElement = $(this).next();  
                var parent = this.parentNode.parentNode;  
                if($(parent).hasClass('noaccordion')) {   
                    if(theElement[0] === undefined) {  
                        window.location.href = this.href;  
                    }  
                    $(theElement).slideToggle('normal', function() {  
                        if ($(this).is(':visible')) {  
                            $(this).prev().addClass('active');  
                        }  
                        else {  
                            $(this).prev().removeClass('active');  
                        }     
                    });
                    return false;  
                }  
                else {  
                    if(theElement.hasClass('acitem') && theElement.is(':visible')) {  
                        if($(parent).hasClass('collapsible')) {  
                            $('.acitem:visible', parent).first().slideUp('normal',  
                            function() {  
                                $(this).prev().removeClass('active');  
                            }  
                        );  
                        return false;   
                    }  
                    return false;  
                }
                if(theElement.hasClass('acitem') && !theElement.is(':visible')) {          
                    $('.acitem:visible', parent).first().slideUp('normal', function() {  
                        $(this).prev().removeClass('active');  
                    });  
                    theElement.slideDown('normal', function() {  
                        $(this).prev().addClass('active');  
                    });  
                    return false;  
                }  
            }  
        }  
    );  
});  
};  

$(document).ready(function() {$('.accordionMenu').initMenu();});

任何帮助将不胜感激 - 我在这里搜索并尝试了一些建议，但似乎没有任何效果。

4

1 回答 1

0

在单击事件中，使用 animate() 平滑地滚动回手风琴的最顶端。

$('html, body').animate({scrollTop: $("#accordion").offset().top}, 500);

这会将屏幕滚动到#accordion.

这是一个简单的长列表示例：http: //jsfiddle.net/SPL_Splinter/dJcBn/

这样，每次用户单击一个类别时，屏幕都会滚动回顶部。

于 2011-04-05T16:42:13.550 回答