0

基本设置是一系列 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 ); 
});
});

-edit- 好的，我有使用 .on 方法的切换方面。新代码如下所示：

$(document).on("click", ".toggle_link", function(event) {
    event.preventDefault();
  $(this).closest(".item").find(".hidden_info").slideToggle("slow");
});

但是 .hide 的东西不能正常工作。我可能最终会切换隐藏的内容，以便默认显示上面的内容。

4

1 回答 1

0

因此，由于元素的动态高度，切换绝对和相对定位并不是一个好的选择。所以我在隐藏的 div 上放置了一个内联的 display: none 样式。不是我最喜欢的选择，因为不使用 javascript 的人可以访问。但它有效。

于 2012-03-02T17:55:38.930 回答