内容在页面加载时消失

Question

所以我有这个简单的问题，我无法弄清楚如何完成这项工作。好的，问题是我有这个JavaScript可以显示与菜单相关的内容。例如，如果我从菜单中选择任何内容，它会过滤内容并向我显示所选项目。在我的情况下，当页面加载时，内容会持续一秒钟然后消失。我不确定为什么会这样？

JS

var CombinationFilters = function() {
    var filters = {};
    var container = null;
    var initEvents = function()
    {
        // filter buttons
        jQuery('.isotope-filter-none li').click(function() {  
            // don't proceed if already selected
            if (jQuery(this).hasClass('selected')) {
                return;
            }

            var optionSet = jQuery(this).parent();
            // change selected class
            optionSet.find('.selected').removeClass('selected');
            jQuery(this).addClass('selected');

            var group = optionSet.attr('data-filter-group');             
            filters[ group ] = jQuery(this).children("a").attr('data-filter-value');
            // convert object into array
            var isoFilters = [];
            for (var prop in filters) {
                isoFilters.push(filters[ prop ]);
            }
            var selector = isoFilters.join('');            
            container.isotope({filter: selector});

            return false;
        });

        // remove selected category
        jQuery('.remove-selected-category').click(function() {  
            jQuery(".isotope-filter-drop-down li[menu-top-index='"+jQuery(this).attr('menu-group')+"']").trigger('click');
        });

        // filter buttons from drop down
        jQuery('.isotope-filter-drop-down li').click(function() {  
            // don't proceed if already selected 
            if (jQuery(this).hasClass('choosen')) {
                return false;
            }

            var choosenCategoryName = jQuery(this).attr('choosen-category-name');
            var menuGroupIndex = jQuery(this).attr('menu-group-index');
            if(choosenCategoryName == "") {
                jQuery(".choosen-category[menu-group='"+menuGroupIndex+"']").hide();
            } else {
                jQuery(".choosen-category[menu-group='"+menuGroupIndex+"'] > div").html(choosenCategoryName);
                jQuery(".choosen-category[menu-group='"+menuGroupIndex+"']").show();
            }

            var optionSet = jQuery(this).parent().closest("div");
            // change selected class
            optionSet.find('.choosen').removeClass('choosen');
            jQuery(this).addClass('choosen');

            var group = optionSet.attr('data-filter-group');  

            filters[ group ] = jQuery(this).children("a").attr('data-filter-value');
            // convert object into array
            var isoFilters = [];
            for (var prop in filters) {
                isoFilters.push(filters[ prop ]);
            }
            var selector = isoFilters.join('');            
            container.isotope({filter: selector});            
            return false;
        });

    };

    var initContainer = function() {
        container = jQuery('#container').isotope({
        itemSelector: '.isotope-item' /*,            
            masonry: {
                columnWidth: 80
            } */
        });
    };

    return {
        init: function()
        {              
            initContainer();
            initEvents();
        }
    };
}();

jQuery(CombinationFilters.init);

HTML

这是内容中实体的HTML，还有更多。我只是提供一个，所以我可以让你们知道这些课程。

<div class="isotope-item grid-item one-quarter iphone mood symptoms" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 3520px, 0px);">
<article class="tools archive grid four-column">
<div class="image">
<img src="http://localhost/newwplms/wp-content/uploads/2013/09/Symple.jpeg">

<div class="hover">

<a class="action" href="http://localhost/newwplms/tools/symple-symptom-tracker-health-diary/">

<i class="icon-chevron-right"></i></a><a class="action fancybox" href="http://localhost/newwplms/wp-content/uploads/2013/09/Symple.jpeg">
<i class="icon-search"></i></a></div></div><div class="meta">
<h4 class="title">

<a href="http://localhost/newwplms/tools/symple-symptom-tracker-health-diary/">Symple</a></h4>

</div>
</article>
</div>

Answer 1

你的第一行html包含在内联css中：

transform: translate3d(0px, 3520px, 0px);

我猜你没有一个高3520像素的屏幕！所以你要从屏幕上发送div。删除它，你就会看到你的div。