使用Scroll Spy打开列表项 [英] Open List Item with Scroll Spy

问题描述

我正在尝试在引导页面上实现 Scroll Spy 样式。该样式是树状菜单，当Scroll Spy在该项目上处于活动状态时展开。

I am trying to achieve the Scroll Spy style on the Bootstrap page. The style is a Tree Menu that expands when the Scroll Spy is active on that item.

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

I have created a simple affix menu and a little snippet of Java Script that works correctly except that it removes the hide class when scroll spy is on the first element. I just cannot figure out the correct argument to tell it when it has found the correct element on the scroll spy.

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 。

推荐答案

试试这个..

  $('#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

Updated Bootply: http://bootply.com/95998

这篇关于使用Scroll Spy打开列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！