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

Question

我有这个带有 ul li 结构的菜单。它在溢出中有隐藏按钮：隐藏；我希望能够通过隐藏的内容使用下一个上一个按钮滑动。但是由于按钮的大小不同，我想不出一种安全的方法来解决这个问题。

任何帮助表示赞赏。

一些指向 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）。当你按下“next”时，你将整个 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'
    );
});

防止无限滚动：添加ifs 以测试 menu.offset>=0（右箭头）。对于左箭头，您需要针对 menu.offset < 0-(menu.width - [可见位的宽度，应为 #othermenu - 箭头宽度]) 进行测试