0

親がStackOverflowでここをクリックした場合、jQueryのサブメニューを表示するという非常に良い質問が見つかりました。次に、jsfiddle http://jsfiddle.net/JtAeh/4/を作成して、css と html で試してみました。出来た！しかし、私が使用しているワードプレスのテーマでは、新しいカスタム スクリプトを無効にするスクリプトがいくつかあります。

親テーマのスクリプトを子テーマのカスタム スクリプトでエレガントな方法で上書きすることは可能ですか?

または、このスクリプトを変更するにはどうすればよいですか:

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

?

.hoverto.clickと.fadeIn(300)toを変更しようとしまし.toggleたが、うまくいきませんでした。

誰かがこの質問に答えられることを願っています。

4

2 に答える 2

0

テーマ開発者の助けを借りました。彼は、メニューをホバーメニューではなくクリックメニューに変える次のスクリプトを送ってくれました。

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

次に、別のサブメニューを開いたときにサブメニューを非表示にするために、もう少し微調整を試みます... ご回答ありがとうございます。

于 2013-07-28T12:15:49.693 に答える