时间戳

首页 > 解决方案 > 如何显示两个水平滚动菜单栏

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

问题描述

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

https://jsfiddle.net/c5grnve6/

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

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');

}

我怎样才能做到这一点？

标签： javascriptjqueryhtml

解决方案

试试这个 

 $(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

推荐阅读