완벽한 스크롤 막대가 아코디언 메뉴와 작동하지 않습니다.

아코디언 슬라이더 메뉴와 공동으로 완벽한 스크롤 막대를 사용하려하지만 예상대로 작동하지 않습니다. 제발 check the fiddle here

첫 번째 하위 메뉴에 대한 스크롤 막대가 활성화되고 페이지로드에도 표시되지 않지만 스크롤 막대를 보려면 먼저 컨테이너에서 스크롤해야합니다.완벽한 스크롤 막대가 아코디언 메뉴와 작동하지 않습니다.

그러나 새 스크롤 막대는 두 번째 및 세 번째 하위 메뉴에 대해 업데이트 된 것으로 보이지 않습니다. here 및 인터넷의 많은 다른 장소에서 제안 된대로 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'); 
      } 
     }); 
    });

당신의 배려와 도움을 주셔서 감사합니다. 감사합니다.

출처

2017-11-20 Prashanth kumar

첫 번째 컨테이너 요소에만 완벽한 스크롤 바를 적용하고 있습니다. 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 \t 
 
    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>

출처

2017-11-20 02:32:44

잡았다, 도와 주셔서 너무 감사합니다. 하위 메뉴가로드 된 후 스크롤 막대를 볼 수없는 이유는 무엇입니까? 먼저 스크롤해야 볼 수 있습니다. 하위 메뉴 항목을 가리키면 스크롤러를 볼 수 없습니다. –

흠 잘 모르겠습니다. 내 생각 엔 PerfectScrollbar 구현에만 국한된 것 같습니다. 설명서를 살펴보십시오. 먼저 스크롤바 높이를 계산해야 할 필요가있는 것 같습니다. 'always display' 옵션이 있는지 확인할 수 있습니다. –

실제로이 메뉴와 공동 작업을하지 않으면 작동합니다. - https://jsfiddle.net/utatti/dyvL31r6/ 알아낼 것입니다 ... 어쨌든 고마워요 다시 친구가 되십시오. –

완벽한 스크롤 막대가 아코디언 메뉴와 작동하지 않습니다.

답변

관련 문제