1

これはばかげた質問かもしれません (それらすべてではありませんか?)、しかし、私はしばらくの間何かに行き詰まっていました... リスト項目に関する詳細を表示するためのライトボックス タイプのポップアップを構築しようとしています。定義リストで。と は正しく動作しfadeInてfadeOutいますが、ポップアップがまだアクティブなときに別のリスト項目でも同じことをトリガーしようとすると、バグが発生します。

ここに私が取り組んでいるコードがあります...

    <html>, etc...
    <div>
       <dl>
        <dt>Trigger Element</dt>
        <dd>
            <div>
            (lightbox content)
            </div>
        </dd>
       <dl>
        <dt>Trigger Element</dt>
        <dd>
            <div>
            (lightbox content)
            </div>
        </dd>
       Etc....
     </dl>

 (function() {
    // Highlight the target dt items
    $('div.cigar-pop').parent().prev().addClass('cigar-highlight');

    // Initialize the lightbox functionality
    $('dd').children('div').addClass('hidden');
    $('dt').on('click', function() {
        //I'm still not entirely sure why this part worked...
        var $this = this;
        $(this).next()
            .children('div')
                .addClass('active')
                    .fadeIn(800, function($this) {
                        $('body').one('click', function(){ 
                            $('.active').fadeOut('fast')
                                .removeClass('active');
            });
        });
    });

    })();

単純なことだと思いますが、何が原因かわかりません。これがこのフォーラムの比類のない天才にとって少し初歩的である場合は申し訳ありません:P

4

1 に答える 1

1

要素が既に存在するかどうかを確認するチェックを追加して.active、単に返すことができます。

$('dt').on('click', function() {
    if($('.active').length) return; // do not return false;
    // Your code

これにより、この関数ブロックの残りのコードが実行されなくなります。つまり、.active要素がある場合、別の要素をクリックすると、新しい要素が表示されるのではなくdt、現在の要素が非表示になります。.active

そうしない理由return false;は、これによってイベントの伝播が停止するためです。これは、に到達するために必要なことでありbody、現在の.active要素が削除/非表示になります。

于 2012-08-07T04:26:02.637 に答える