Question

我在StackOverflow上找到了非常好的问题jQuery show submenu if parent have been clicked。然后我做了一个jsfiddle，http://jsfiddle.net/JtAeh/4/用我的css和html来试试。有效！但是在我正在使用的wordpress主题中，他们有一些脚本可以取代我的新自定义脚本。

是否可以优雅地用子主题中的自定义脚本否决父主题中的脚本？

或者：如何更改此脚本：

var mobile_menu = function() {
        if( $(window).width() < 600 && $('body').hasClass('responsive') ) {            
            $( '#nav > ul, #nav .menu > ul' ).mobileMenu({
                subMenuDash : '-'
            });

            $( '#nav > ul, #nav .menu > ul' ).hide();
        }
    }
    mobile_menu();

    var show_dropdown = function()
    {        
        var options;              

        containerWidth = $('#header').width();
        marginRight = $('#nav ul.level-1 > li').css('margin-right');
        submenuWidth = $(this).find('ul.sub-menu').outerWidth();
        offsetMenuRight = $(this).position().left + submenuWidth;
        leftPos = -18;

        if ( offsetMenuRight > containerWidth )
            options = { left:leftPos - ( offsetMenuRight - containerWidth ) };    
        else
            options = {};

        $('ul.sub-menu:not(ul.sub-menu li > ul.sub-menu), ul.children:not(ul.children li > ul.children)', this).css(options).stop(true, true).fadeIn(300);    
    }

    var hide_dropdown = function()
    {                               
        $('ul.sub-menu:not(ul.sub-menu li > ul.sub-menu), ul.children:not(ul.children li > ul.children)', this).fadeOut(300);    
    }

    $('#nav ul > li').hover( show_dropdown, hide_dropdown );

这个简洁的脚本：

$('ul li a').click(function() {
    $(this).parent().find('ul.sub-menu').toggle();
    return false;
});

我尝试将.hover更改为.click，将.fadeIn(300)更改为.toggle，但这是一个长镜头而且无效。

希望有人能够回答这个问题。

Answer 1

您可以尝试在悬停或点击事件中删除任何其他事件处理程序（在您添加之前适当的任何一个：

$('ul li a').unbind('click').click(function() {
    $(this).parent().find('ul.sub-menu').toggle();
    return false;
});

Answer 2

我从主题开发者那里得到了一些帮助。他给我发了这个脚本，将菜单变成了点击菜单而不是悬停菜单：

var show_dropdown = function()
    {
        if( $( this ).children( 'ul').length > 0 ) {
            var options;

            containerWidth = $('#header').width();
            marginRight = $('#nav ul.level-1 > li').css('margin-right');
            submenuWidth = $(this).find('ul.sub-menu').outerWidth();
            offsetMenuRight = $(this).position().left + submenuWidth;
            leftPos = -18;

            if ( offsetMenuRight > containerWidth )
                options = { left:leftPos - ( offsetMenuRight - containerWidth ) };
            else
                options = {};

            $('ul.sub-menu:not(ul.sub-menu li > ul.sub-menu), ul.children:not(ul.children li > ul.children)', this).css(options).stop(true, true).fadeIn(300);
            return false;
        } else {
            window.location = $(this).children('a').attr('href');
        }
    }

    var hide_dropdown = function()
    {
        if( $( this ).children( 'ul').length > 0 ) {
            $('ul.sub-menu:not(ul.sub-menu li > ul.sub-menu), ul.children:not(ul.children li > ul.children)', this).fadeOut(300);
            return false;
        }
    }

    $('#nav ul > li').toggle( show_dropdown, hide_dropdown );

现在我会尝试稍微调整一下，以便在打开另一个子菜单时隐藏子菜单...谢谢你的答案。

单击子菜单

2 个答案: