0

Masonry では、要素をクリックして削除することができます。問題は、その要素を直接クリックする必要があることです。したがって、これらの「レンガ」を画像ギャラリーとして使用する場合 (これらの写真が背景画像として含まれている限り)、要素をクリックして削除できます。問題は、これらをいくつかのメッセージ/情報/その他のコンテンツ コンテナーとして使用する場合です。次に、フォーマット関連のものにより、親要素が他のタグの背後に「隠され」、実際にクリックすることはできません。

問題はここに示されています: http://jsfiddle.net/dan1410/SfU5T/ 赤のボックスは閉じることができますが、緑のボックスは別の要素と重なっているため閉じられません。

次のようなコードを試しました：

eventie.bind( container, 'click', function( event ) {
// don't proceed if item was not clicked on
if ( !classie.has( event.target, 'closeable' ) ) {
return;
}
// remove clicked element
msnry.remove( event.target );
// layout remaining item elements
msnry.layout();
});
});

と

var todelete = document.querySelector('.closeable');
eventie.bind( container, 'click', function( event ) {
// remove clicked element
msnry.remove( todelete );
// layout remaining item elements
msnry.layout();
});
});

ただし、閉じたい要素を直接クリックする必要があります...

私の石積みのコンテンツ構造は次のようになります

<div id="masonry" >
   <div class="item blue closeable">
     <div id="itheader"><h2 class="secsectiontitle">Space available</h2></div>
     <div id="itcontent">
        some statistics here...<br/>
        and here, too
     </div>
</div>

.closeable クラスを持つ要素のみがクローズ可能であると想定されています。

問題は、ボタン/リンクを使用して要素を閉じる方法です。私はJSにあまり詳しくないので、皆さんに助けを求めたいと思います。前もって感謝します！

4

1 に答える 1

0

click子要素でのイベントの伝播を停止するハンドラーがない限り、clickイベントは問題なく発生するはずです。

また、jQuery を使用している場合は、jQuery Masonry の API を使用する必要があります。

注：フィドルにアクセスできず、ソリューションをテストできませんでした

var $container = $('#masonry').on('click', '.closeable', function (e) {
    $container.masonry('remove', e.currentTarget);
    $container.masonry(); //layout
    $container.masonry('reloadItems'); //OP said it was also required
});
于 2013-09-13T20:00:53.023 に答える