基本设置是一系列div,其中包含在单击链接时向下滑动的其他信息。适用于第一页的项目,但任何其他项目显示隐藏的div显示和切换链接js不起作用。
$(".hidden_info").hide();
$(".toggle_link").click(function(event) {
event.preventDefault();
$(this).closest(".item").find(".hidden_info").slideToggle("slow");
});
var $container = $('#content');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item'
});
});
$container.infinitescroll({
navSelector : "div.navigation",
nextSelector : "div.navigation a:first",
itemSelector : "#content div.item",
loading: {
msgText : "Loading new products...",
finishedMsg: 'No more products to load.',
}
},
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
});
CNC中 好的,我使用.on方法处理切换方面。新代码如下所示:
$(document).on("click", ".toggle_link", function(event) {
event.preventDefault();
$(this).closest(".item").find(".hidden_info").slideToggle("slow");
});
但是.hide的东西不能正常工作。我可能最终会切换隐藏的内容,因此上面显示的内容默认显示。
答案 0 :(得分:0)
因此,由于元素的动态高度,切换绝对和相对定位的东西并不是一个好的选择。所以我选择了一个内联样式的显示:在隐藏的div上没有。由于不使用javascript的人的可访问性,不是我最喜欢的选择。但它确实有效。