在类更改时触发子列表的可见性

trigger visibility of sublist on class change

本文关键字：列表 可见性      更新时间：2023-09-26

在过去的两天里，我一直在努力实现这一点，但我对javascript还很陌生，所以可能我只是没有看到什么。

我正在尝试创建一个Sidenavigation，它突出显示您所在的当前部分http://trevordavis.net/blog/jquery-one-page-navigation-plugin/

但我正在处理子项，我想在当前部分激活后立即触发此子项的可见性。因此，如果包含的列表项具有.current类，并且子列表的列表项之一具有.current.类，则ul将是可见的

我发现，我可能需要触发一个关于类更改的事件。我尝试过以下方法，但尚未奏效。

标记：

<ul id="nav">
    <li class="current"><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li class="parent"><a href="#section-3">Section 3</a>
        <ul class="sublist">
            <li><a href="#subsection-1">Subsection 1</a></li>
            <li><a href="#subsection-2">Subsection 2</a></li>
            <li><a href="#subsection-3">Subsection 3</a></li>
        </ul>
    </li>
</ul>

对于jquery，我尝试过这个：

$('#nav').on('event', function(){
    $('.parent').addClass('current').trigger('visibility');
});
$('.parent').on('visibility', function(){
    $('.parent .sublist').addClass('visible');
});

我主要想做的是Bootrap在其文档中所做的事情。向下滚动时，您可以看到Glyphicons，只要到达此部分，子项就会弹出（可用的glyphs、如何使用、示例）http://getbootstrap.com/components/

SASS迄今应用于导航：

.overview{
    transition: .3s all;
    ul{
        margin-left: 10px;
            ul{
                max-height: 0;
                transition: max-height 1s ease-out;
                overflow: hidden;
            }
    }
}
.current{
    > a{
        font-weight: $bold;
    }
    ul{
        max-height: 9999px !important;
        transition: max-height 1s ease-out;
    }
}

如果父列表设置为当前，我可以显示子列表，但一旦子列表为当前，子列表就会被隐藏，所以我想，我需要一些javascript

我现在看到了：）

你可以做的（可能有多种方法，但我会做的）是创建一个函数，如果类接近窗口顶部，则在滚动时进行检查，如果是，则在导航栏中的相关项目中添加一个类。

在没有插件的情况下应该相对简单，大致如下：

  var checkSide = function(){
    $('.container p').each(function(){
      var item = $(this).offset().top,
          $window = $(window),
          navItem = $('#nav a[data-id="'+$(this).data('id')+'"]');
      if ($window.scrollTop() >= item) {
        if (!navItem.hasClass('current')) {
          $('#nav .current').removeClass('current');
          navItem.addClass('current');
        }
      }
    });
  };
  $(window).scroll(function(){
     checkSide(); 
  });

请参阅http://codepen.io/jhealey5/pen/GjJFI-应该能够根据您的需要进行调整。

假设我理解正确：）

相关文章：