パーフェクトスクロールバーがアコーディオンメニューと連携していません

アコーディオンスライダーメニューと連携してパーフェクトスクロールバーを使用しようとしていますが、期待通りに機能しません。 Please check the fiddle here

最初のサブメニューでスクロールバーがアクティブになっていて、ページの読み込みにも表示されていませんが、最初にスクロールバーを表示するためにスクロールする必要があります。パーフェクトスクロールバーがアコーディオンメニューと連携していません

しかし、新しいスクロールバーは、2番目と3番目のサブメニューでは更新されていないようです。 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/ これを理解しようとします...とにかくおかげで再び仲間になります。 –

パーフェクトスクロールバーがアコーディオンメニューと連携していません

答えて

関連する問題