在jQuery手风琴菜单中突出显示活动链接

Question

所以我找到了一个我正在研究的WordPress网站的jQuery Accordion菜单代码。一切都运行良好，但当我点击子菜单项并加载页面时，手风琴将关闭。我想在页面加载时打开当前部分，这样你就可以看到你所在的页面。

我尝试了很多不同的东西，在WordPress分配给.slideDown('normal')的父级<li>等的类上使用.current-menu-parent，但是唉，还没有任何工作。我不熟悉JavaScript / jQuery，所以希望有人可以帮助我。

这是当前的jQuery代码：

( function( $ ) {
    $( document ).ready(function() {

        $('#cssmenu > ul > li > a').click(function() {

            $('#cssmenu li').removeClass('active');
            $(this).closest('li').addClass('active');   
            var checkElement = $(this).next();

            if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                $(this).closest('li').removeClass('active');
                checkElement.slideUp('normal');
            }

            if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#cssmenu ul ul:visible').slideUp('normal');
                checkElement.slideDown('normal');
            }

            if($(this).closest('li').find('ul').children().length == 0) {
                return true;
            } else {
                return false;   
            }       

        });
    });
} )( jQuery );

This是我从中得到它的地方。

Answer 1

没有看到你的菜单输出，这有点难以分辨......但你需要做的是触发点击事件不仅是正在查看的页面，而且它也是祖先。并在click事件之外执行此操作。像这样的东西（你的代码，略有修改）：

( function( $ ) { $( document ).ready(function() {

    $('.current-page-ancestor > a').trigger('click');
    $('.current-menu-item > a').trigger('click');

    $('#cssmenu > ul > li > a').click(function() {

        $('#cssmenu li').removeClass('active');
        $(this).closest('li').addClass('active');   
        var checkElement = $(this).next();

        if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            $(this).closest('li').removeClass('active');
            checkElement.slideUp('normal');
        }

        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#cssmenu ul ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
        }

        if($(this).closest('li').find('ul').children().length == 0) {
            return true;
        } else {
            return false;   
        }       

    });
});

} )( jQuery );

作为旁注，我知道并没有回答你的直接问题......但是整个过程可以通过使用基于JS的CSS转换更容易完成......并且更可靠，更少依赖于JS。你确实使用了少量的JS来添加/删除一个类，但是css控制着动画。

如果JS被禁用，你可以有更优雅的降级...使用css：hover伪来允许手风琴仍然起作用。此外，您可以使用默认的WordPress菜单类通过css在页面加载时打开手风琴，而不是依靠JS来查找应该打开哪一个...只是一个想法。