完美的滾動條不適用於手風琴菜單

Question

我正在嘗試使用Perfect Scrollbar與手風琴滑塊菜單合作，但它沒有按預期工作。 請檢查這里的小提琴

滾動條正在為第一個子菜單激活，並且也沒有顯示在頁面加載上，但我必須先在容器中滾動才能看到滾動條。

但是新的滾動條似乎沒有針對第二個和第三個子菜單進行更新。 我正在嘗試使用ps.update();在這里以及互聯網上的許多其他地方更新PerfectScrollbar功能ps.update(); 不確定函數調用是否在我這里正確完成。

更新：
得到它，把它留在這里，因為它可能會幫助后來的人。 https://jsfiddle.net/prashu421/egkfxzrt/

      $(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');
            }
        });
    });

感謝您的考慮和幫助。 謝謝。

Answer 1

您只是將完美的滾動條應用於第一個容器元素。 嘗試使用querySelectorAll('.sub-menu')並將完美的滾動條應用於每個容器：

 $(document).ready(function() { const container = document.querySelector('.sub-menu'); document.querySelectorAll('.sub-menu').forEach(container => { new PerfectScrollbar(container); }); const accordion_head = $('.accordion > li > a'); const 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 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'); } }); }); 

 .accordion, .accordion ul, .accordion li, .accordion a, .accordion span { margin: 0; padding: 0; border: none; outline: none; } .accordion li { list-style: none; } .accordion li>a { display: block; position: relative; min-width: 110px; padding: 0 0 0 40px; height: 30px; color: #cbcbcb; font: bold 12px/32px Trebuchet MS, Arial, sans-serif; text-decoration: none; text-shadow: 0px 1px 0px rgba(0, 0, 0, .35); background: #717377; background: -moz-linear-gradient(top, #717377 0%, #515356 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #717377), color-stop(100%, #515356)); background: -webkit-linear-gradient(top, #717377 0%, #515356 100%); background: -o-linear-gradient(top, #717377 0%, #515356 100%); background: -ms-linear-gradient(top, #717377 0%, #515356 100%); background: linear-gradient(to bottom, #717377 0%, #515356 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#717377', endColorstr='#515356', GradientType=0); -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .1), 0px 1px 0px 0px rgba(0, 0, 0, .1); -moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .1), 0px 1px 0px 0px rgba(0, 0, 0, .1); box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .1), 0px 1px 0px 0px rgba(0, 0, 0, .1); } .accordion>li:hover>a, .accordion>li:target>a, .accordion>li>a.active { color: #fdfdfd; text-shadow: 1px 1px 1px rgba(255, 255, 255, .2); background: #4f5154; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRmNTE1NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyZDJlMzAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #4f5154 0%, #2d2e30 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4f5154), color-stop(100%, #2d2e30)); background: -webkit-linear-gradient(top, #4f5154 0%, #2d2e30 100%); background: -o-linear-gradient(top, #4f5154 0%, #2d2e30 100%); background: -ms-linear-gradient(top, #4f5154 0%, #2d2e30 100%); background: linear-gradient(to bottom, #4f5154 0%, #2d2e30 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5154', endColorstr='#2d2e30', GradientType=0); } .accordion li>a span { display: block; position: absolute; top: 7px; right: 0; padding: 0 10px 0px 10px; margin-right: 10px; font: normal bold 12px/18px Arial, sans-serif; background: #404247; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .2), 1px 1px 1px rgba(255, 255, 255, .1); -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .2), 1px 1px 1px rgba(255, 255, 255, .1); box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .2), 1px 1px 1px rgba(255, 255, 255, .1); } .accordion>li:hover>a span, .accordion>li:target>a span, .accordion>li>a.active span { color: #fdfdfd; text-shadow: 0px 1px 0px rgba(0, 0, 0, .35); background: #161616; } /* Images */ .accordion>li>a:before { position: absolute; top: 0; left: 0; content: ''; width: 24px; height: 24px; margin: 4px 8px; background-repeat: no-repeat; background-image: url(Images/icone_accordeon.png); background-position: 0px 0px; } .accordion li.files>a:before { background-position: 0px 0px; } .accordion li.files:hover>a:before, .accordion li.files:target>a:before, .accordion li.files>a.active:before { background-position: 0px -24px; } .accordion li.mail>a:before { background-position: -24px 0px; } .accordion li.mail:hover>a:before, .accordion li.mail:target>a:before, .accordion li.mail>a.active:before { background-position: -24px -24px; } .accordion li.cloud>a:before { background-position: -48px 0px; } .accordion li.cloud:hover>a:before, .accordion li.cloud:target>a:before, .accordion li.cloud>a.active:before { background-position: -48px -24px; } .accordion li.sign>a:before { background-position: -72px 0px; } .accordion li.sign:hover>a:before, .accordion li.sign:target>a:before, .accordion li.sign>a.active:before { background-position: -72px -24px; } /* Sub Menu */ .sub-menu li a { color: #797979; text-shadow: 1px 1px 0px rgba(255, 255, 255, .2); background: #e5e5e5; border-bottom: 1px solid #c9c9c9; -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .1), 0px 1px 0px 0px rgba(0, 0, 0, .1); -moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .1), 0px 1px 0px 0px rgba(0, 0, 0, .1); box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .1), 0px 1px 0px 0px rgba(0, 0, 0, .1); } .sub-menu li:hover a { background: #efefef; } .sub-menu li:last-child a { border: none; } .sub-menu li>a span { color: #797979; text-shadow: 1px 1px 0px rgba(255, 255, 255, .2); background: #dbdbdb; border: 1px solid #c9c9c9; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .sub-menu em { position: absolute; top: 0; left: 0; margin-left: 14px; color: #a6a6a6; font: normal 10px/32px Arial, sans-serif; } /* Functionality */ .accordion li>.sub-menu { display: none; max-height: 150px; overflow: auto; position: relative; } .accordion li:target>.sub-menu { display: block; } #bloc-accordeon { width: 40%; } #bloc-accordeon p { Font-family: Trebuchet MS, Arial, Helvetica; font-size: 12px; font-weight: bold; color: #797979; } /*Scroll bar styling*/ .ps__rail-x, .ps__rail-y { opacity: 0.6; } 

 <script src="https://rawgit.com/utatti/perfect-scrollbar/master/dist/perfect-scrollbar.js"></script> <link href="https://rawgit.com/utatti/perfect-scrollbar/master/css/perfect-scrollbar.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="bloc-accordeon"> <ul class="accordion"> <li id="one" class="files"> <a href="#one">One</a> <ul class="sub-menu"> <li style="font-size: 12px;"><a href="#"><em>01</em>4.2 FFF</a></li> <li style="font-size: 12px;"><a href="#"><em>02</em>6.3 FFF</a></li> <li style="font-size: 12px;"><a href="#"><em>03</em>4.0 FFF</a></li> <li style="font-size: 12px;"><a href="#"><em>04</em>4.2 TTD</a></li> <li style="font-size: 12px;"><a href="#"><em>05</em>3.0 TTD</a></li> <li style="font-size: 12px;"><a href="#"><em>06</em>3.0 TTD</a></li> <li style="font-size: 12px;"><a href="#"><em>07</em>3.0 TTD</a></li> <li style="font-size: 12px;"><a href="#"><em>08</em>3.0 TTD</a></li> </ul> </li> <li id="two" class="mail"> <a href="#two">Two</a> <ul class="sub-menu"> <li style="font-size: 12px;"><a href="#"><em>01</em>4.2 FFF</a></li> <li style="font-size: 12px;"><a href="#"><em>02</em>6.3 FFF</a></li> <li style="font-size: 12px;"><a href="#"><em>03</em>4.0 FFF</a></li> <li style="font-size: 12px;"><a href="#"><em>04</em>4.2 TTD</a></li> <li style="font-size: 12px;"><a href="#"><em>05</em>3.0 TTD</a></li> <li style="font-size: 12px;"><a href="#"><em>06</em>3.0 TTD</a></li> <li style="font-size: 12px;"><a href="#"><em>07</em>3.0 TTD</a></li> <li style="font-size: 12px;"><a href="#"><em>08</em>3.0 TTD</a></li> </ul> </li> <li id="three" class="cloud"> <a href="#two">Three</a> <ul class="sub-menu"> <li style="font-size: 12px;"><a href="#"><em>01</em>4.2 FFF</a></li> <li style="font-size: 12px;"><a href="#"><em>02</em>6.3 FFF</a></li> <li style="font-size: 12px;"><a href="#"><em>03</em>4.0 FFF</a></li> <li style="font-size: 12px;"><a href="#"><em>04</em>4.2 TTD</a></li> <li style="font-size: 12px;"><a href="#"><em>05</em>3.0 TTD</a></li> <li style="font-size: 12px;"><a href="#"><em>06</em>3.0 TTD</a></li> <li style="font-size: 12px;"><a href="#"><em>07</em>3.0 TTD</a></li> <li style="font-size: 12px;"><a href="#"><em>08</em>3.0 TTD</a></li> </ul> </li> </ul> </div>