0

我想使用 ASOS 的 jQuery 效果 - http://www.asos.com/Men/A-To-Z-Of-Brands/Cat/pgehtml.aspx?cid=1361#

好消息是当您单击一个字母时，它会滑到特定的行

问题是我网站的 CMS 数据库中存在字符限制，因此 ASOS 中使用的表格过于庞大而无法使用。你知道用 div 解决这个问题的方法吗？

4

1 回答 1

1

您可以使用 jQuery 的slideUp()和slideDown()方法来模拟这种滑动。

假设表格在'a'并且你想滑动到'c'，你可以使用jQuery来slideUp'a'，一旦完成，再次使用jQuery来slideUp'b'。您必须使用slideUp(). 同样的事情也适用于重新显示元素（即你从'c' 到'a'），除了你slideDown()用来取消隐藏你的元素。这是我编写的一些代码作为示例：

function hideRecur(startLetterEl, stopLetterEl){
    if( startLetterEl === stopLetterEl ){
        return;
    }
    $(startLetterEl).slideUp("slow", 
        function(){ 
            var nextEl = $(startLetterEl).next()[0];
            if( nextEl){
                hideRecur(nextEl, stopLetterEl);
            }
        }
    );
}
function showRecur(startLetterEl, stopLetterEl){
    if( startLetterEl === stopLetterEl ){
        return;
    }
    $(startLetterEl).slideDown("slow", 
        function(){ 
            var prevEl = $(startLetterEl).prev()[0];
            if( prevEl){
                showRecur(prevEl, stopLetterEl);
            }
        }
    );
}

这是一个展示这一点的jsfiddle

于 2011-08-01T23:23:28.500 回答