Question

我正在尝试在Bootstrap page上实现 Scroll Spy 样式。当Scroll Spy在该项目上处于活动状态时，该样式为Tree Menu 展开。

我创建了一个简单的词缀菜单和一小段Java脚本，它正常工作，只是当滚动间谍在第一个元素上时它删除了隐藏类。当它在滚动间谍上找到正确的元素时，我无法找出正确的参数来告诉它。

HTML：

<div class="row">
    <div class="col-sm-3 col-xs-3" id="nav">
        <ul class="nav list-group affix">
        <li class="list-group-item"><a href="#g1">Item 1</a></li>
        <li class="list-group-item"><a href="#g2">Item 2</a></li>
        <li class="list-group-item"><a href="#g3">Item 3</a>
            <ul class="yep">
                <li class="list-group-item child hide"><a href="#g3">Item a</a></li>
                <li class="list-group-item child hide"><a href="#g3">Item b</a></li>
            </ul>
        </li>
        <li class="list-group-item"><a href="#g4">Item 4</a></li>
        <li class="list-group-item"><a href="#g5">Item 5</a></li>
        </ul>
    </div>
    <div class="col-sm-9 col-xs-9">
        <section id="g1">
            Content 1
        </section>

        <section id="g2">
            Content 2
        </section>

        <section id="g3">
            Content 3
        </section>

        <section id="g4">
            Content 4
        </section>

        <section id="g5">
            Content 5
        </section>
    </div>

</div>

JS：

$( document ).ready(function() {
        $('body').scrollspy({ 'target': '#nav', 'offset': 10 });

        $('#nav').on('activate.bs.scrollspy', function() {

            if ($('ul').is('.yep') && $('li').is('.hide') && $('li').is('.child')) {
                    $('li').removeClass('hide');
            }
            else{
                $('ul').addClass('show');
                console.log("Yeah");
            }

            $(this).parent().children('ul.tree').toggle(200);

        });
    });

目前正在运行的版本 Bootply。

Answer 1

试试这个..

  $('#nav').on('activate.bs.scrollspy', function() {

    var ele = $(this).find('.active');

    if (ele.find('.yep').length>0) {
      $('.yep li').removeClass('hide');
    }
    else{
      $('.yep li').addClass('hide');
    }

  });

更新了Bootply：http://bootply.com/95998

使用Scroll Spy打开列表项

1 个答案: