同位素元素刷新/重绘

Question

我在wordpress页面上使用同位素菜单。 一切正常，直到我使用另一个插件来扩展内容（菜单实际上）。 由于该菜单仅显示第一个位置，我必须手动选择类别以正确显示所有位置。

这是我用于菜单的代码：

 if ( $('#menus-container').length ) {

        // Zebra stripes

        $('.menu-list .menu-item:even').addClass('even');
        $('.menu-list .menu-item:odd').addClass('odd');

        // Isotope

        var $menus = $('.menu-list'),
            filter = $('#menus-filter .menu-icon a').eq(0).attr('data-sort');


        $menus.imagesLoaded(function() {

            $menus.isotope({
                itemSelector: '.menu-item',
                filter: filter,
                animationEngine: engine,
                layoutMode : 'fitRows',
                animationOptions: {
                    duration: 400,
                    easing: 'linear',
                    queue: true
                }
            });

            $('#products').isotope( 'reloadItems' ).isotope();
            $('#menus-filter .menu-icon').eq(0).addClass('selected');

            $('.menus-category h5').text( $('#menus-filter .menu-icon a').eq(0).text() );
        });

        $('#menus-filter .menu-icon a').on('click touchend', function() {

            $('#menus-filter .selected').removeClass('selected');
            $(this).parent().addClass('selected');

            var menusFilter = $(this).attr('data-sort');
            var menusLegend = $(this).text();

            $('.menus-category h5').text( menusLegend );

            $menus.isotope({filter: menusFilter});
        });

        $('.menus-options a').click(function() {

            $menus.isotope();
        });

        // Binding mouse and touch events

        var bindOver, bindOut;

        if ( !isMobile.any() ) {

            bindOver = 'mouseover';
            bindOut  = 'mouseout';

        } else {

            bindOver = 'touchstart';
            bindOut  = 'touchend';
        }

        // Image hover and zoom icon overlay

        $('a.menu-image').each(function() {

            var dataColor  = $(this).attr('data-color');

            $(this).on(bindOver, function(e) {

                $(this).find('.menu-overlay').css({'width': $(this).find('img').width()});
                $(this).find('.menu-overlay').stop().animate({'background-color': $.Color(dataColor).transition('transparent', 0.3)}, 400);
                $(this).find('.menu-overlay .menu-zoom').stop().fadeIn(300);

            });

            $(this).on(bindOut, function(e) {

                $(this).find('.menu-overlay').stop().animate({'background-color': $.Color(dataColor).transition('transparent', 1)}, 400);
                $(this).find('.menu-overlay .menu-zoom').stop().fadeOut(300);
            });
        });

        // Category legend hover

        $('.menus-panel .menu-icon').each(function() {

            $(this).on(bindOver, function(e) {

                $(this).find('.menu-legend').stop().animate({'left': '60px', 'opacity': 1}, 300).show();
            });

            $(this).on(bindOut, function(e) {

                $(this).find('.menu-legend').stop().animate({'left': '0px', 'opacity': 0}, 300).fadeOut(100);
            });
        });
    }

我试过用jQuery修改代码：

jQuery( function() {   

    var $menus = jQuery('#menus');
$menus.imagesLoaded(function() {

            $menus.isotope({
                itemSelector: '.menu-item',
                filter: filter,
                animationEngine: engine,
                layoutMode : 'fitRows',
                animationOptions: {
                    duration: 400,
                    easing: 'linear',
                    queue: true
                }
            });
});

它有效但显示菜单的所有位置并打破了菜单的设计。

任何帮助都会很棒。