Question

我需要为我的网站显示两个水平滚动菜单栏。因此，我搜索并找到了带有左右箭头的自定义水平滚动菜单。

当页面中只有一个滚动菜单时，它可以正常工作。如果我使用两个菜单，则出现问题。

01）单击向右或向左箭头时，它将同时移动两个菜单箭头。

02）到达终点时，右箭头不隐藏。

所以我尝试复制此代码，并使用了不同的类名，但没有运气。

if (menuPosition <= paddleMargin) {
    $(leftPaddle).addClass('hidden');
    $(rightPaddle).removeClass('hidden');
} else if (menuPosition < menuEndOffset) {
    // show both paddles in the middle
    $(leftPaddle).removeClass('hidden');
    $(rightPaddle).removeClass('hidden');
} else if (menuPosition >= menuEndOffset) {
    $(leftPaddle).removeClass('hidden');
    $(rightPaddle).addClass('hidden');

}

我该如何做到这一点？

Answer 1

尝试

 $(rightPaddle).on('click', function() {
        $(this).parent().parent().find('.menu').animate( { scrollLeft: menuInvisibleSize}, scrollDuration);
    });

    // scroll to right
    $(leftPaddle).on('click', function() {
        $(this).parent().parent().find('.menu').animate( { scrollLeft: '0' }, scrollDuration);
    });

或者您可以使用ParentsUntil

Answer 2

01）单击向右或向左箭头时，它将同时移动两个菜单箭头。这是因为您已经写了：

// scroll to left
$(rightPaddle).on('click', function() {
    $('.menu').animate( { scrollLeft: menuInvisibleSize}, scrollDuration);
});

// scroll to right
$(leftPaddle).on('click', function() {
    $('.menu').animate( { scrollLeft: '0' }, scrollDuration);
});

此处rightPaddle和leftPaddle抓住rightPaddle和leftPaddle两者，然后到'.menu'，两个菜单都在移动。您需要为它们提供单独的ID，以便可以分别调用它们。

如何显示两个水平滚动菜单栏

2 个答案: