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转换来完成整个过程可以更容易......并且更可靠，更少依赖在JS上。你确实使用了少量的JS来添加/删除一个类，但是css控制着动画。

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

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

1 个答案: