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 に答える