内容在页面加载时消失
The content disappears on page load
所以我有一个简单的问题,我不知道如何完成。好吧,问题是我有这个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。
相关文章:
- 如何使东西在加载时消失
- angularJS,一个部分或模态通知,加载几秒钟后就会消失
- "数据表”;jquery加载后CSS样式消失
- 页面加载后消失
- 标记在重新加载页面后消失:AngularJS
- 空的数组绑定元素在页面加载时消失
- 如何防止动态添加的元素在页面重新加载后消失
- 如何在HTML5视频完成加载后使文本消失
- JavaScript XY图表在JSF素数中的页面加载时消失
- 动态加载的图像在打印预览后消失
- 要随索引页一起加载的滚动更新,并在 iframe 加载来自链接的内容时消失
- 加载动画在第二次 ajax 调用之前消失
- setInterval JavaScript 调用在 ajax 加载后不会消失
- 加载页面后,其他元素会消失
- 无线电输入在页面重新加载时消失(枚举,foreach,默认选中,记住页面重新加载的答案)
- 使用jQuery/JavaScript加载页面时使元素消失
- 如果用户禁用了Javascript,则预加载程序JS加载Gif不会消失
- 内容在页面加载时消失
- TinyMCE在AJAX加载的DIV中重新初始化后消失
- 如何对加载特定图像后消失的加载屏幕进行编码