Javascript 完美滚动条不适用于手风琴菜单

我正在尝试使用完美的滚动条和手风琴滑块菜单，但它并没有按预期工作。请

第一个子菜单的滚动条被激活了，页面加载中也没有显示滚动条，但我必须先在容器中滚动才能看到滚动条

但是新的滚动条似乎没有更新第二和第三个子菜单。 我正在尝试使用

ps.update（）更新PerfectScrollbar函数，如中和internet上许多其他地方所建议的那样不确定函数调用是否由我在此处正确完成。



更新：

让它工作，把它留在这里，因为它可能会帮助别人以后。

感谢您的关心和帮助。
谢谢。
您只对第一个容器元素应用了完美的滚动条。尝试使用
querySelectorAll（'.sub菜单'）
并对每个容器应用完美的滚动条：


$（文档）.ready（函数（）{
const container=document.querySelector（'.sub-menu'）；
document.querySelectorAll（'.sub菜单'）.forEach（container=>{
新的滚动条（容器）；
});
常数手风琴头=$（'.accordion>li>a'）；
const accordion_body=$（'.accordion li>.sub-menu'）；
//加载时打开第一个选项卡
accordion_head.first（）.addClass（'active'）.next（）.slideDown（'normal'）；
//点击功能
手风琴头（点击），功能（事件）{
//禁用标题链接
event.preventDefault（）；
//单击时显示和隐藏选项卡
if（$（this.attr（'class'）！='active'）{
手风琴琴体。滑块（“正常”）；
$（this.next（）.stop（true，true.slideToggle（'normal'）；
手风琴头移除类（“活动”）；
$（this.addClass（'active'）；
}
});
});
手风琴，
.手风琴ul，
李国章，
.手风琴a，
.手风琴音程{
保证金：0；
填充：0；
边界：无；
大纲：无；
}
李国章{
列表样式：无；
}
手风琴{
显示：块；
位置：相对位置；
最小宽度：110px；
填充：0 40px；
高度：30px；
颜色：#CBCB；
字体：粗体12px/32px投石机MS，Arial，无衬线；
文字装饰：无；
文本阴影：0px 1px 0px rgba（0,0,0,35）；
背景：#717377；
背景：-莫兹线性梯度（顶部，#717377 0%，#515356 100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0%，#717377）、颜色停止（100%，#515356））；
背景：-webkit线性梯度（顶部，#717377 0%，#515356 100%）；
背景：-o-线性梯度（顶部，#717377 0%，#515356 100%）；
背景：-ms线性梯度（顶部，#717377 0%，#515356 100%）；
背景：线性梯度（至底部，#717377 0%，#515356 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#717377'，endColorstr='#515356'，GradientType=0）；
-webkit盒阴影：插入0px 1px 0px 0px rgba（255,255,255,1），0px 1px 0px 0px rgba（0,0,0,1）；
-moz盒阴影：插入0px 1px 0px 0px rgba（255,255,255,1），0px 1px 0px 0px rgba（0,0,0,1）；
方框阴影：插入0px 1px 0px 0px rgba（255，255，255.1），0px 1px 0px 0px rgba（0，0，0.1）；
}
.手风琴>李：悬停>a，
.手风琴>李：目标>a，
.手风琴>李>a{
颜色：#fdfdfd；
文本阴影：1px 1px 1px rgba（255、255、255、.2）；
背景#4f5154；
背景：url（数据：数据：数据：图像/svg+xml；基本64，基本64，PD94BBWWWWWWBWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWBBWWWWWBWWWWWWWWBWWWWWWWWWWWWWWVVVVVVVVvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRmNTE1NCIgc3RvcC1vcGFjaXR5PSIxIi8+CIAGICA8C3RVCCBVZMZZZZZZZQ9IjWcuiHN0B3BHY2L0ET0IMPGOGIDWGLUZYR3JHLLBNQ+CIGPHJGLY3QGED0IMCIGE0IMCIGD2LKDK9IjJJ9IjJJJZZZK9IjJJJJJJJZZZZZL9IJJJJJJZZZL9IJJJJJJZZZZZZL9IJJJJJJJJJZZZZZL9IJJJJJJJJJJJZZZZZZZZZL9IZ；
背景：-莫兹线性梯度（顶部，#4f5154 0%，#2D230 100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0%、#4f5154）、颜色停止（100%、#2d2e30））；
背景：-webkit线性梯度（顶部，#4f5154 0%，#2D230 100%）；
背景：-o-线性梯度（顶部，#4f5154 0%，#2D230 100%）；
背景：-ms线性梯度（顶部，#4f5154 0%，#2D230 100%）；
背景：线性梯度（至底部，#4f5154 0%，#2D230 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#4f5154'，endColorstr='#2de2e30'，GradientType=0）；
}
.手风琴{
显示：块；
位置：绝对位置；
顶部：7px；
右：0；
填充：0 10px 0px 10px；
右边距：10px；
字体：普通粗体12px/18px Arial，无衬线；
背景：404247；
-webkit边界半径：15px；
-moz边界半径：15px；
边界半径：15px；
-webkit盒阴影：插入1px 1px 1px rgba（0,0,0,2），1px 1px 1px rgba（255,255,255,1）；
-moz盒阴影：插入1px 1px 1px rgba（0,0,0,2），1px 1px 1px rgba（255,255,255,1）；
框阴影：插入1px 1px 1px rgba（0,0,0,2），1px 1px 1px rgba（255,255,255,1）；
}
.手风琴>李：悬停>跨度，
.手风琴>李：目标>音程，
.手风琴>li>a.主动音程{
颜色：#fdfdfd；
文本阴影：0px 1px 0px rgba（0,0,0,35）；
背景：#161616；
}
/*图像*/
a:以前{
位置：绝对位置；
排名：0；
左：0；
内容：''；
宽度：24px；
高度：24px；
利润率：4px8px；
背景重复：无重复；
背景图片：url（Images/icone\u accordeon.png）；
背景位置：0px 0px；
}
a:以前{
背景位置：0px 0px；
}
.accordio li.files:hover>a:before，
.accordio li.files:target>a:before，
.accordion li.files>a.active:之前{
背景位置：0px-24px；
}
a:以前{
背景位置：-24px 0px；
}
邮件：hover>a：在，
邮件：target>a:before，
.手风琴李.邮件>a.活动：之前{
      $(document).ready(function() {
        // Store variables
        //var ps = new PerfectScrollbar('.sub-menu');

        const container = document.querySelector('.sub-menu');
        const ps = new PerfectScrollbar(container);

        var accordion_head = $('.accordion > li > a'),
            accordion_body = $('.accordion li > .sub-menu');

        // Open the first tab on load
        accordion_head.first().addClass('active').next().slideDown('normal');

        // Click function
        accordion_head.on('click', function(event) {
            // Disable header links 
            ps.update();                
            event.preventDefault();

            // Show and hide the tabs on click
            if ($(this).attr('class') != 'active'){
                accordion_body.slideUp('normal');
                $(this).next().stop(true,true).slideToggle('normal');
                accordion_head.removeClass('active');
                $(this).addClass('active');
            }
        });
    });