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 ); 
});
});

-編集-わかりました、.on メソッドを使用してトグル アスペクトを動作させました。新しいコードは次のようになります。

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

しかし、.hide は正しく機能していません。非表示にするものを切り替えて、上に配置されたコンテンツがデフォルトで表示されるようにするだけかもしれません。

4

1 に答える 1

0

そのため、要素の動的な高さのために、絶対位置と相対位置を切り替えることは適切なオプションではありませんでした。そこで、非表示の div にインライン スタイルの表示を設定しました。JavaScript を使用していない人々のアクセシビリティのため、私のお気に入りの選択ではありません。しかし、それは機能します。

于 2012-03-02T17:55:38.930 に答える