如何使用jquery在水平导航菜单上滑动这些按钮？

Question

我的这个菜单有ul li结构。它有溢出的隐藏按钮：隐藏;我希望能够通过隐藏的内容与下一个prev按钮一起滑动。但由于按钮大小不同，我想不出一个安全的方法来解决这个问题。

任何帮助表示感谢。

一些指向jquery插件的指针。

感谢。

html在这里：http://jsfiddle.net/utKqe/2/

我设法得到了理想的效果（但仍然不能让它停止无限远）：

    //other category page, navigate through cats
$(document).ready(function() {

    $('#otherleftarrow').click(function() {
        $('#othermenu ul').animate({marginLeft: '-=100px'}, 200);
        return false; // prevent default click action from happening!
    });

    $('#otherrighttarrow').click(function() {
        $('#othermenu ul').animate({marginLeft: '+=100px'}, 200);
        return false;
    });

});

Answer 1

保留一个包含每个li元素的offsetX的列表，并始终记住您当前的偏移量（最初为0）。当你按“下一步”时，你将整个ul结构滑动到-offsetXArray [nextElement]，类似地，当你按“prev”时，你将它滑动到-offsetXArray [prevElement]

Answer 2

jQuery让你访问元素的计算宽度（如实际显示的那样），这样你就可以用它来改变导航ul的左偏移量，从而显示以前隐藏的按钮。

我会尽快获得文档的链接。

修改：width()：http://api.jquery.com/width/

编辑：也许这可以让你知道如何使用它：

$('#otherleftarrow').click(function() {
    var menu = $('#othermenu ul');
    menu.css(
        'marginLeft', 
        (menu.offset().left + $('.catotherselected').parent().prev().width()) + 'px'
    );
});

要防止无限滚动：添加if以测试menu.offset＆gt; = 0（向右箭头）。对于左箭头，您需要针对menu.offset＆lt; 0-（menu.width - [可见位的宽度，应为#othermenu - 箭头宽度]）