Question

过去两天我一直在努力实现这一目标，但我对javascript还不熟悉，所以也许我只是没有看到。

我尝试创建的是Sidenavigation，它突出了您当前所在的部分。我找到了一个jquery插件，就像魅力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，一旦到达此部分，子项目会弹出打开（可用的字形，如何使用，示例）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

Answer 1

我现在看到了：）

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

如果没有插件，应该相对简单，这有点像：

  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 - 应该能够根据您的需求进行调整。

假设我理解正确：）

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

1 个答案: