1

我在 jquery 中有一个滚动菜单，它在鼠标悬停时垂直滚动：（它的一部分被隐藏，直到滚动到视图中） 

<script type="text/javascript">
$(document).ready(function() {

    //Scroll the menu on mouse move above the #sidebar layer
    $('#sidebar').mousemove(function(e) {

        //Sidebar Offset, Top value
        var s_top = parseInt($('#sidebar').offset().top);

        //Sidebar Offset, Bottom value
        var s_bottom = parseInt($('#sidebar').height() + s_top);

        //Roughly calculate the height of the menu by multiply height of a single LI with the total of LIs
        var mheight = parseInt($('#menu li').height() * $('#menu li').length);


        //Calculate the top value
        //This equation is not the perfect, but it 's very close    
        var top_value = Math.round(((s_top - e.pageY) / 100) * mheight / 2);

        //Animate the #menu by chaging the top value
        $('#menu').animate({
            top: top_value
        }, {
            queue: false,
            duration: 5000
        });
    });
});​
</script>

然后我使用搜索并突出显示 jquery 脚本在滚动菜单中搜索名称：

<script type="text/javascript">
$(function() {
    $('#text-search').bind('keyup change', function(ev) {
        // pull in the new value
        var searchTerm = $(this).val();)

    // remove any old highlighted terms
    $('#sidebar').removeHighlight();

    // disable highlighting if empty
    if (searchTerm) {
        // highlight the new term
        $('#sidebar').highlight(searchTerm);
    }
    });
});​
</script>

但是我的问题是：当我输入搜索词时，它只会突出显示可见的菜单项。如何让 jquery 自动滚动到 div 中的搜索词？

4

1 回答 1

1

类似于：

var searchTermTop,
    searchTermBottom;

searchTermTop = searchTerm.offsetParent().top;
searchTermBottom = searchTerm.offsetParent().bottom;

if(searchTermTop < 0){
    //set the menu scroll to it's current scroll + the searchTermTop
}
if(searchTermBottom > mheight){
    //set the menu scroll to it's current scroll + the searchTermBottom
}

类似的东西。如果您需要更多细节，请告诉我。现在需要跑出办公室，否则我会填写一些详细信息。

于 2012-08-16T21:45:28.883 回答