Question

如果我的孩子不应该被看到，即当有人滚动到另一个部分时，我怎么能隐藏他？你能听一个特定的“框架”/位置来显示不同的子菜单，或者看看哪个部分有活动的课程，然后取出那些.attr('id')并在nav中显示相应的部分？

我希望这里有人能够提供一个具有良好浏览器支持的解决方案（如果这可能是一个问题）。

标记：

<nav>
  <ul>
    <li><a href="#1">First</a>
         <ul id="sub-menu1">
             <li>Item 1</li>
             <li>Item 2</li>
         </ul> 
    </li>
    <li><a href="#2">Second</a>
    </li>
    <li><a href="#3">Third</a>
        <ul id="sub-menu3">
             <li>Item 1</li>
             <li>Item 2</li>
         </ul>
    </li>
    <li><a href="#4">Fourth</a>
        <ul id="sub-menu4">
             <li>Item 1</li>
             <li>Item 2</li>
        </ul>
    </li>
    <li><a href="#5">Fifth</a>
          <ul id="sub-menu5">
             <li>Item 1</li>
             <li>Item 2</li>
         </ul> 
    </li>
  </ul>
</nav>

<div class="sections">
  <section id="1"><h1>First</h1></section>
  <section id="2"><h1>Second</h1></section>
  <section id="3"><h1>Third</h1></section>
  <section id="4"><h1>Fourth</h1></section>
  <section id="5"><h1>Fifth</h1></section>
</div>
<footer></footer>

的Javascript / jQuery的：

var sections = $('section')
, nav = $('nav')
, nav_height = nav.outerHeight();

$(window).on('scroll', function () {
    var cur_pos = $(this).scrollTop();

    sections.each(function() {
        var top = $(this).offset().top - nav_height,
            bottom = top + $(this).outerHeight();

        if (cur_pos >= top && cur_pos <= bottom) {
            nav.find('a').removeClass('active');
            sections.removeClass('active');

            $(this).addClass('active');
            var link = nav.find('a[href="#'+$(this).attr('id')+'"]');
            link.addClass('active');

            // Calling this function just to see if there is a sub menu to show
            checkSubmenu(link);
        }
    });
});

// Want to check if there is a Submenu - if, then show it.
// But it should also hide a sub-menu not corresponding to the correct section
// which this solutions does not support
function checkSubmenu(el) {
    if(el.next('ul').length) {
        el.next('ul').slideDown();
    } else {
        $('nav > ul > li > ul').slideUp();
    }
}

nav.find('a').on('click', function () {
    var $el = $(this)
    , id = $el.attr('href');

    $('html, body').animate({
        scrollTop: $(id).offset().top - nav_height
    }, 500);

    return false;
});

Answer 1

使用其他方法： Fiddle

这不会循环所有部分，而是过滤“当前”部分（使用过滤器）的部分。然后它会根据节号和导航ID找到子菜单（如果有的话），这与原始代码中的方式非常相似。隐藏（slideUp）隐藏（slideUp）中的每个活动类 not ，同时删除活动类。最后，如果尚未激活，则会显示相应的子菜单。

$(window).on('scroll', function () {
    var cur_pos = $(this).scrollTop();

    //find visible section
    var sect = sections.filter(function(){
        var top = $(this).offset().top - nav_height,
            bottom = top + $(this).outerHeight();
        return cur_pos >= top && cur_pos <= bottom;
    });

    //find submenu 
    var submenu = nav.find('a[href="#'+sect.attr('id')+'"]').next('ul');        
    //hide previously shown, not in the current selection
    $('.active').not(submenu).slideUp().removeClass('active');   
    //if not already active, show
    submenu.not('.active').addClass('active').slideDown();

});

当滚动到某个id时，如何隐藏子<ul>？</ul>

1 个答案: