Question

我有一个带有子类别的下拉菜单，它连接到fullscreen.js以导航部分。当用户用鼠标滚轮向下晃动时，相关的章节标题会在侧边栏菜单中突出显示。

我试图让一个主要类别在用户滚动到其子子类别之一时自动展开，并在用户滚动到第3或第1部分时折叠。在示例中，它是第2节，在点击时会展开。

当孩子的子元素处于活动状态时，我一直尝试使用 on（“focus”）复制与点击菜单相同的效果，如下所示：

$('#cssmenu li.has-sub>a').on('focus', 'li', 'li', '.active', function(){
    $(this).removeAttr('href');
    var element = $(this).parent('li');
    if (element.hasClass('open')) {
        element.removeClass('open');
        element.find('li').removeClass('open');
        element.find('ul').slideUp();
    }
    else {
        element.addClass('open');
        element.children('ul').slideDown();
        element.siblings('li').children('ul').slideUp();
        element.siblings('li').removeClass('open');
        element.siblings('li').find('li').removeClass('open');
        element.siblings('li').find('ul').slideUp();
    }
});

但这对代码没有影响，看起来太长了。有没有办法做到这一点？

Answer 1

你的代码一团糟，我希望我能帮助它稍微分解一下，尽管它并不像它本来那样完美。

小提琴：http://jsfiddle.net/n62t9wfy/4/

jQuery的：

$(document).ready(function() {
    var idInterval;
    var has_sub = $('.has-sub');
    function openmenu() {
        has_sub.children('.accrd').slideDown();
        has_sub.addClass('opened');
    }
    function closemenu() {
        has_sub.children('.accrd').slideUp();
        has_sub.removeClass('opened');
    }
    $('.has-sub>a').click(function() {
        if ($('.has-sub').hasClass('opened')) {
            closemenu()
        } else {
            openmenu()
        }
    });
    $('#fullpage').fullpage({
        anchors: ['sec1', 'top1', 'top2', 'top3', 'top4', 'top5', 'sec3', 'sec4', 'sec5', ],
        menu: ".cssmenu",
        sectionsColor: ['blue', 'pink', 'gray', 'white', 'yellow', 'green', 'purple', 'orange', 'black'],
        slidesNavigation: true,
        loopBottom: true,
        'verticalCentered': false,
        afterRender: function() {
            idInterval = setInterval(function() {
                $.fn.fullpage.moveSlideRight();
            }, 4500);
        },
        afterLoad: function(anchorLink, index) {
            if (index == 1) {
                idInterval = setInterval(function() {
                    $.fn.fullpage.moveSlideRight();
                }, 4500);
            } else {
                clearInterval(idInterval);
            }

            $('.inlinedColor').css('color', 'gray').removeClass('inlinedColor');
            $('li.active').prevAll('span.year').first().add($('li.active').parents('li').find('a span span')).addClass('inlinedColor').css('color', 'black');

            if ($('.accrd li').hasClass('active')) {
                openmenu()
            } else {
                closemenu()
            }
        }
    });
});

Answer 2

我的建议是在你的＆＃34;页面索引＆＃34;之间建立关系。来自afterLoad: function(anchorLink, index)的导航..以下是我的方法：

HTML - 了解如何将ID添加到可以点击的每个<li>中：

    <li id="1" data-menuanchor="sec1" class="active"><a href='#sec1'><span>Section 1</span></a></li>
    <li class='has-sub'><a href='#'><span class="sectitle"><span>Section 2 +</span></span></a>
      <ul>
         <span class="year">Sub cat 1</span>

               <li id="2" data-menuanchor="top1"><a href='#top1'><span class="coltitle">topic 1</span></a></li>
               <li id="3" data-menuanchor="top2"><a href='#top2'><span class="coltitle">topic 2</span></a></li>


         <span class="year">Sub cat 2</span>

               <li id="4" data-menuanchor="top3"><a href='#top3'><span class="coltitle">topic 3</span></a></li>
               <li id="5" data-menuanchor="top4"><a href='#top4'><span class="coltitle">topic 4</span></a></li>
               <li id="6" data-menuanchor="top5"><a href='#top5'><span class="coltitle">topic 5</span></a></li>


       </ul>
    </li>
    <li id="7" data-menuanchor="sec3"><a href='#sec3'><span class="sectitle"><span>Section 3</span></span></a></li>

jQuery的：

afterLoad: function(anchorLink, index){
                selected = $("#menutab").find("li#"+index);
                alert(selected.parents("li.has-sub").length);
                if(selected.parents("li.has-sub").length == 1){
                    //put your expand code here, I'm not sure how you expand your nav
                    element = selected.parents("li.has-sub");
                    element.addClass('open');
                }
                //rest code is omitted

这是我的Fiddle，当您浏览它时，会查看您选择的网页是否为has-sub课程的子级。如果它是子菜单的一部分，它将返回1.

当子元素处于活动状态时，使菜单项展开

2 个答案: