jQuery accordion + scrollTo - нужен аккордеон, чтобы прокрутить фокус - PullRequest
Новая
       8

jQuery accordion + scrollTo - нужен аккордеон, чтобы прокрутить фокус

0 голосов
/ 05 апреля 2011

было интересно, если кто-нибудь может помочь.

Я использую аккордеон для отображения списка подкатегорий на сайте объявлений, есть 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();});

Любая помощь будет принята с благодарностью - я искал здесь и попробовал некоторые из предложений, однако, похоже, ничего не работает.

1 Ответ

0 голосов
/ 05 апреля 2011

В событии щелчка используйте animate () для плавной прокрутки назад к крайней вершине аккордеона. 

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

Это приведет к прокрутке экрана до крайней вершины #accordion.

Вот пример с простым длинным списком: http://jsfiddle.net/SPL_Splinter/dJcBn/

Таким образом, каждый раз, когда пользователь нажимает на категорию, экран прокручивается обратно к началу.

...