簡體   English   中英

jQuery切換不適用於無限滾動和砌體

[英]jquery toggle not working with infinite scroll and masonry

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

-編輯-好吧,我可以使用.on方法來進行切換。 新代碼如下所示:

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

但是.hide東西不能正常工作。 我可能最終會切換隱藏的內容,因此默認情況下會顯示位於上方的內容。

因此,由於元素的動態高度,切換絕對位置和相對位置並不是一個好的選擇。 因此,我采用了嵌入式顯示方式:在隱藏的div上沒有顯示方式。 不是我最喜歡的選擇,因為不使用javascript的用戶可以訪問。 但這有效。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM