内容在页面加载时消失

The content disappears on page load

本文关键字:加载 消失      更新时间:2023-09-26

所以我有一个简单的问题,我不知道如何完成。好吧,问题是我有这个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>

您的第一行html包含作为内联css的一部分:

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

我猜你没有3520像素高的屏幕!所以你要把div从屏幕上发送出去。删除它,您将看到您的div。