javascript - 完美滚动条不适用于 Accordion 菜单

标签 javascript jquery html css accordion

我正在尝试将 Perfect Scrollbar 与 Accordion slider 菜单结合使用，但它没有按预期工作。请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');
            }
        });
    });

感谢您的考虑和帮助。 谢谢。

最佳答案

您只是将完美的滚动条应用于第一个容器元素。尝试使用 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>

关于javascript - 完美滚动条不适用于 Accordion 菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47384167/

上一篇：javascript - 转换数据表列日期格式

下一篇：javascript - 在filter()中使用JQuery的toggle()的目的是什么？

相关文章：

javascript - jQuery 在倒数第四行之前添加行

javascript - 如何在 Underscore 模板中存储 JSON 数据？

使用 RegExp 的 Javascript 正则表达式匹配

java - TypeError : jQuery. 大气未定义 Packed.js:2261

javascript - 如何在视频标签上播放ar​​raybuffer？

html - 如何保持选中的列表项

javascript - 有没有更好的方法来 'fake' 链接的 href 属性？

javascript - 如何为 HTML 中表格的 <th> 元素提供工具提示

Windows Phone 7.1 中的 JavaScript

javascript - Angular 的循环模板可以通过枚举循环吗？

©2024 IT工具网  联系我们