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

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

我试图让一个主类别在用户滚动到其子类别时自动展开，在用户滚动到第3节或第1节时自动折叠。 在本例中，它是第2节，单击后展开

我一直在尝试使用“聚焦”（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();
    }
});

---

但这对代码没有影响，看起来太长了。有什么方法可以做到这一点吗？

你的代码乱七八糟，我希望我能帮你把它分解一下，尽管它并没有那么完美

小提琴：

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()
            }
        }
    });
});

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

---

我的建议是在

afterLoad:function（anchorLink，index）

中的“页面索引”与导航之间建立一个关系。。以下是我的做法：

HTML-查看如何将id添加到可以单击的每个

：

    <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>

---

这是我的，当您在其中滑动时，将查看您选择的页面是否是

has sub

类的子级。如果它是子菜单的一部分，它将返回1。

谢谢，是的，代码来自不同的来源，因此有点难以理解，这看起来更加精简。