点击子菜单答案

【问题标题】：Submenu on click点击子菜单
【发布时间】：2013-07-28 20:15:49
【问题描述】：

我在 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，但这是一个很长的目标并且没有成功。

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

【问题讨论】：

尝试在页面加载后附加您的脚本。这将确保您的脚本将推翻 wordpress 脚本

标签： jquery wordpress submenu

【解决方案1】：

您可以尝试在悬停或单击事件上删除任何其他事件处理程序（在添加之前选择合适的：

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

【讨论】：

【解决方案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 );

现在我将尝试对其进行更多调整，以便在打开另一个子菜单时隐藏子菜单...谢谢您的回答。

【讨论】：